HTML5新增的客户端效验

2018-01-30

在HTML5规范以前，客户端效验只能通过JavaScript来完成，HTML5改变了这种现状，HTML5为表单控件额外增加了一些输入效验属性。HTML5页面只要简单地设置这些效验属性即可完成客户端效验

使用效验属性执行效验

HTML5为表单控件新增了如下几个效验属性。

required：该属性指定该表单控件必须填写。该属性的值必须是required或完全省略属性值
pattern：该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式
min、max、step：这3个属性只对数值类型、日期类型的<input.../>元素有效，这3个属性控制该表单控件的值必须在min~max之间，并符合step步长

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用效验属性执行效验</title>
</head>
<body>
  <form action="add">
    图书名：  <input type="text" required name="name" /><br>
    图书ISBN：<input type="text" name="isbn" required pattern="d{3}-\d-d{3}-d{5}" /><br>
    图书价格：<input type="number" name="price" min="20" max="150" step="1"><br>
  <input type="submit" value="提交">
  </form>
</body>
</html>

调用checkValidity方法进行效验

如果表单对象调用checkVaildity()方法返回true，则表明该表单内的所有表单控件都有效。只要任意一个表单控件不能通过输入效验，表单对象的checkVaildity()方法就会返回false。
如果表单对象调用checkVaildity()方法返回true，则表明该表单控件可以通过输入效验；否则返回false。

<form action="add1">
    生日：<input type="date" name="birth" id="birth" /><br>
    邮件地址： <input type="email" id="email" name="email" /><br>
    <input type="submit" value="提交" onclick="return check();"/>
</form>
<script>
    let check = function(){
      return commonCheck("birth","生日","字段必须是有效的日期！")
        && commonCheck("email","邮件地址","字段必须符合电子邮件的格式！");
    }
    let commonCheck = function(field , fieldName , tip){
      let targetEle = document.getElementById(field);
      if (targetEle.value.trim() == "") {
        alert(fieldName + "字段必须填写！");
        return false;
      }else if(!targetEle.checkValidity()){
        alert(fieldName + tip);
        return false;
      }
      return true;
    }
</script>

自定义错误提示

有些情况下，我们希望定制自己的错误信息，HTML5为表单控件新增的setCustromValidity()方法来实现，该方法接受一个字符串参数，该字符串将会作为用户“自定义”的错误提示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用效验属性执行效验</title>
</head>
<body>
  <form action="add">
    图书名：  <input type="text" required name="name" /><br>
    图书ISBN：<input type="text" name="isbn" required pattern="d{3}-\d-d{3}-d{5}" /><br>
    图书价格：<input type="number" name="price" min="20" max="150" step="1"><br>
  <input type="submit" value="提交">
  </form>
   <script>
    let check = function(){
     if (!document.getElementById("name").checkValidity()){
      document.getElementById("name").setCustomValidity("图书名是必须的填的！");
     } 
     if (!document.getElementById("isbn").checkValidity()){
      document.getElementById("isbn").setCustomValidity("图书ISBN是必须的填的！");
     } 
     if (!document.getElementById("price").checkValidity()){
      document.getElementById("price").setCustomValidity("图书价格是必须的填的！");
     }
    };
  </script>
</body>
</html>

关闭效验

在某些时候，如果希望暂时关闭HTML5对表单提供的输入效验，则可以通过如下两种方式来实现

<form.../>元素增加novalidate属性，该属性的值要么是novalidate，要么省略属性值
为type=“submit”的<input.../>或<button.../>元素设置formnovalidate属性，该属性的值要么是novalidate，要么省略属性值

第一种方式将会直接关闭表单的输入效验功能，无论通过哪个按钮提交表单，该表单都不会执行输入效验；第二种方式则由指定的提交按钮来关闭表单的输入效验，只有当用户通过指定了formnovalidate属性的按钮提交表单时才会关闭表单的输入效验