HTML5对表单的约束验证

时间:2022-06-03 07:56:09

    在HTML5中增加了许多新的功能,用于表单提交到服务器之前对表单进行数据的验证(抢了javascript的饭碗),有了这些功能,即便是javascript没有加载进来还是可以确保基本的验证。换句话说,浏览器自己会根据标记中的规则执行验证,然后自己显示适当的错误消息。当然,这些功能既然是来自HTML5 的,当然只能在支持HTML5这部分的内容的浏览器才有效,所以请我们看向未来的眼光来学习下面的这些个功能。

    1. 必填字段 在表单中指定required字段,凡是标注有required的字段在提交表单时值都不能为空。这个属性适用于<input>、<textarea>和<select>字段。(opera11及之前的版本还不支持<select>的required属性)。  
      <form action="post">
      <label for="ele1">约束必填字段:</label><input id="eleOne" type="text" name="username" required>
      <button type="submit">submit</button>
      </form>

      在chrome下有如下提示:
      HTML5对表单的约束验证
      可以使用如下代码检测浏览器的支持性

      var isRequiredSuppored = "required" in document.createElement("input"); 

       



      dfdsfsfsdfsdfsdfsdfsdfsdfasdfsdfasdfasdfasdfasdf

    2. 其他输入类型
      HTML5为input元素的type属性又增加了几个值。这些新类型不仅能反映数据类型的信息,而且还能提供一些默认的验证功能,其中“email”和“url”是两个得到支持最多的类型,浏览器为他们提供了验证机制。
      <form action="post">
      <label for="ele2">其他输入类型:</label><br>
      <input type="email" name="email"><br>
      <input type="url" name="url"><br>
      <button type="submit">submit</button>
      </form>

      在chrome有如下提示:
      HTML5对表单的约束验证HTML5对表单的约束验证
      提示:浏览器只能简单验证其输入的格式并不能验证它的有效性。
      可以用以下方式来检测浏览器是否支持

      var input = document.createElement("input");
      input.type="email";
      var isEmailedSuppored = (input.type = "email");

       

       

    3. 数值范围
      HTML5还给type定义了其他属性“number”、“range”、“datatime”、“datatime-local”、“data”、“month”、“week”、“time”。对于这些数值类型的输入元素,可以指定min属性(最小的可能值)、max属性(最大的可能值)和step属性(从min到max的两个刻度间的差值)
      <form action="post">
      <label for="ele3">数值范围:</label><input type="number" min="0" max="10" step="2"><br>
      <button type="submit">submit</button>
      </form>

      HTML5对表单的约束验证

      在不同的浏览器中可能会看到能够自动递增递减的按钮(如图),因浏览器而异。

    4. 输入模式
      HTML5为文本新增了pattern属性。这个属性的值是一个正则表达式,用于匹配文本框中的值
      <form action="post">
      <label for="ele4">输入模式:</label><input type="text" pattern="\d+" name="count"><br>
      <button type="submit">submit</button>
      </form>

      HTML5对表单的约束验证
      注意:模式的开头和末尾不用加^和$符号(假定已经有了)。这两个符号表示输入的值必须从头到尾都与模式匹配。
      使用以下代码可以检测浏览器是否支持pattern属性。

      var isPatternSuppored = "pattern" in document.createElement("input");

       

    5. 禁用验证
      通过设置novalidate属性,可以告诉我们表单不进行验证。
      <form method="post" action="XXX.php" novalidate>
      <!--这里插入表单元素->
      </form>

      如果一个表单中有多个提交按钮,为了指定点击某个提交按钮不必验证表单,可以在响应的按钮上添加formnovalidate属性。

      <form method="post" action="XXX.php" novalidate>
      <!--这里插入表单元素->
      <input type="submit" value="submit">
      <input type="submit" value="NOsubmit" formvalidate>
      </form>