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>

       

标签：

相关文章