HTML5约束验证（一）_html5 校验

前言

涉及内容：

HTML5约束验证的<input>部分。

技能掌握：

• HTML
  • 部分HTML表单属性
  • 部分HTML事件
  • 部分DOM方法
  • …
• JavaScript
  • console对象
  • if/else语句
  • …

前提概念

表单约束

是什么？

对用户输入的表单数据进行限制

为什么？

• 更好的获取有意义的用户数据
• 为用户提高更佳的浏览体验

怎么办？

• 内在约束（intrinsic constraint）即，为 <input>标签的 type 属性选择合适的值。如：

  <!-- 将type属性设置为email，就会自动创建一个约束 -->
  <input type="email">
  1
  2

• 基本约束（basic constraint）即，设置具有限制性的属性值。如：

  <!-- 将此设置为必填项 -->
  <input type="email" required>
  <!--或
  <input type="email" required="required">
   -->
  1
  2
  3
  4
  5

• 友好的提示表单设置的约束。如：

  <input type="email" placeholder="请输入正确的邮箱地址哦">
  1

---

表单数据校验

是什么？

校验用户输入的表单数据是否符合网页的预期。

为什么？

• 保证网站后续应用程序的正常运行
• 对用户数据进行保护
• 保护网站的安全

怎么办？

• 客户端校验

  • JavaScript校验（即，程序员自定义校验方式）
  • HTML5内置表单校验（即，浏览器根据HTML5规范所内置的API）

• 服务端校验

  … …

比较：（JavaScript校验 VS HTML5内置校验）

• JavaScript校验灵活性更佳
• HTML5内置校验性能更佳

---

HTML5内置表单校验

是什么？

HTML5中对用户的输入数据校验，使用表单元素的校验属性来实现。（可以不用写任何脚本代码）

为什么？

• 提升网站的性能，提高用户体验
• 一定程度上保证用户的数据安全以及网站的安全
• 提高表单的可用性

怎么办？

• 约束验证

---

约束验证（Constraint validation）

概念

对表单以及表单中每个控件设置更复杂的限制（约束），并验证用户输入控件的数据是否符合限制；同时，提供给用户更清晰的验证失败提示（与浏览器默认提示对比）。

约束 + 验证 + 提示

方式

注：下列内容主要涉及第一种方式（因为示例的需要所有会使用到JavaScript），且只对<input>标签的操作。

• HTML5自带的关于表单验证的接口
• JavaScript结合约束验证API进行复杂的约束，即使用表单的事件触发JavaScript
• 约束验证的可视化提示，即使用CSS对用户进行反馈操作

基本原理

注：此处更多涉及如何操作表单DOM来实现约束验证。

• 操作表单DOM
• 设置表单自身

查看约束

注： 此处以<input>标签为例，因此使用的是，表单DOM中的HTMLInputElement接口所拥有的属性和方法（下列的属性和方法并不是<input>标签独有的），包括：validity、validationMessage、willValidate、setCustomValidity()、checkValidity()。

validity属性

• 作用

  表示<input>标签可以拥有的约束，且这些约束此时的有效性情况。

• 状态

  只读

• 返回值

  ValidityState [object | 只读]

  属性名	属性值	描述
  badInput	Boolean	true：用户输入了浏览器无法转换的值；false：满足约束
  customError	Boolean	true：使用setCustomValidity ()方法设置自定义提示信息（信息不是空字符串）；false：没有使用setCustomValidity ()方法设置自定义提示信息
  patternMismatch	Boolean	true：输入值不符合pattern属性值的规定；false：符合pattern属性值的规定
  rangeOverflow	Boolean	true：输入值大于max属性值；false：小于或等于max属性值
  rangUnderflow	Boolean	true：输入值小于min属性值；false：大于或等于min属性值
  stepMismatch	Boolean	true：输入值不符合step属性值的规定；false：符合step属性值的规定（step表示步长）
  tooLong	Boolean	true：输入值大于maxlength属性值；false：小于或等于maxlength属性值
  tooShort	Boolean	true：输入值小于minlength属性值；false：大于或等于minlength属性值
  typeMismatch	Boolean	true：输入值不符合type属性值的规定；false：符合type属性值的规定
  valid	Boolean	true：输入值符合所有属性的规定；false：输入值不符合任意一个属性的规定
  valueMissing	Boolean	true：不符合required属性的规定（即，没有输入值）；false：符合required属性的规定

• 语法

  HTMLInputElement.validity
  1

• 示例

  1. badInput为true，即，用户输入了浏览器无法转换的值。

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处若输入“3.1415926-99999999”时，badInput将会返回true -->
     <form>
         <label>年龄</label>
         <input type="number" id="age" onblur="checkBlur(this)" />
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("age");
     console.log(test.validity);  //查看有效性状态
     //查看badInput属性值
     function checkBlur(test) {
         if (test.validity.badInput) {
             console.log("Bad input detected！检测到错误的输入！");
         } else {
             console.log("Content of input OK!输入无误！");
         }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10

     ---

     

     ---

  2. customError为true，即，使用setCustomValidity ()方法设置不满足约束时的自定义提示信息（信息建议不是空字符串）

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处继续输入“3.1415926-99999999”，使badInput返回true，来查看自定义的信息 -->
     <form>
         <label>年龄</label>
         <input type="number" id="age" onblur="checkBlur(this)" />
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("age");
     var validityState =  test.validity;
     
     console.log(validityState);  //查看有效性状态
     
     function checkBlur(test) {
         if (validityState.badInput) {
             test.setCustomValidity("请输入正确的年龄！");//设置自定义的错误提示信息
             console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
             console.log(test.validationMessage);//在控制台查看，错误提示信息
             console.log(validityState.customError);//查看customError属性值
         } else {
             console.log("Content of input OK!输入无误！");
         }
         test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16

     注：

     • validationMessage 表示用户输入不符合约束时，浏览器的错误提示信息。详情见下文的validationMessage属性。
     • reportValidity()表示将浏览器的错误提示信息显示给用户。详情见下文的reportValidity()方法。

     ---

     

     ---

  3. patternMismatch为true，即，不符合正则表达式的要求。

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处输入“1”，使 patternMismatch 返回true -->
     <form>
         <label>电话</label>
         <input type="tel" id="tel" onblur="checkBlur(this)" pattern="[0-9]{11}"/>
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("tel");
     var validityState =  test.validity;
     
     console.log(validityState);  //查看有效性状态
     
     function checkBlur(test) {
         if (validityState.patternMismatch) {
             console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
             console.log(test.validationMessage);//在控制台查看，错误提示信息
         } else {
             console.log("Content of input OK!输入无误！");
         }
         test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14

     ---

     

     ---

  4. rangeOverflow为true，即，输入值大于max属性值，不符合约束。

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处输入“200”，使 rangeOverflow 返回true -->
     <form>
         <label>年龄</label>
         <input type="number" id="age" onblur="checkBlur(this)" max="150"/>
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("age");
     var validityState =  test.validity;
     
     console.log(validityState);  //查看有效性状态
     
     function checkBlur(test) {
         if (validityState.rangeOverflow) {
             console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
             console.log(test.validationMessage);//在控制台查看，错误提示信息
         } else {
             console.log("Content of input OK!输入无误！");
         }
         test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14

     ---

     

     ---

  5. rangeUnderflow为true，即，输入值小于min属性值，不符合约束。

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处输入“-200”，使 rangeUnderflow 返回true -->
     <form>
         <label>年龄</label>
         <input type="number" id="age" onblur="checkBlur(this)" min="0"/>
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("age");
     var validityState =  test.validity;
     
     console.log(validityState);  //查看有效性状态
     
     function checkBlur(test) {
         if (validityState.rangeUnderflow) {
             console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
             console.log(test.validationMessage);//在控制台查看，错误提示信息
         } else {
             console.log("Content of input OK!输入无误！");
         }
         test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14

     ---

     

     ---

  6. stepMismatch为true，即，输入值不符合step属性值的规定

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处输入“0.14”，使 stepMismatch 返回true -->
     <form>
         <label>年龄</label>
         <input type="number" id="age" onblur="checkBlur(this)" step="2"/>
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("age");
     var validityState =  test.validity;
     
     console.log(validityState);  //查看有效性状态
     
     function checkBlur(test) {
         if (validityState.stepMismatch) {
             console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
             console.log(test.validationMessage);//在控制台查看，错误提示信息
         } else {
             console.log("Content of input OK!输入无误！");
         }
         test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14

     ---

     

     ---

  7. tooLong为true，即，输入值大于maxlength属性值。

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处设置value属性值为“天王盖地虎101”，之后在页面上将输入框中的“101”删除，使 tooLong 返回true -->
     <form>
         <label>姓名</label>
         <input type="text" id="userName" onblur="checkBlur(this)" value="天王盖地虎101" maxlength="4"/>
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("userName");
     var validityState =  test.validity;
     
     console.log(validityState);  //查看有效性状态
     
     function checkBlur(test) {
         if (validityState.tooLong) {
             console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
             console.log(test.validationMessage);//在控制台查看，错误提示信息
         } else {
             console.log("Content of input OK!输入无误！");
         }
         test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14

     ---

     

     ---

  8. tooShort为true，即，输入值小于minlength属性值。

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处设置value属性值为“天王盖地虎101”，之后在页面上将输入框中的“盖地虎101”删除，使 tooShort 返回true -->
     <form>
         <label>姓名</label>
         <input type="text" id="userName" onblur="checkBlur(this)" value="天王盖地虎101" maxlength="4"/>
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("userName");
     var validityState =  test.validity;
     
     console.log(validityState);  //查看有效性状态
     
     function checkBlur(test) {
         if (validityState.tooShort) {
             console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
             console.log(test.validationMessage);//在控制台查看，错误提示信息
         } else {
             console.log("Content of input OK!输入无误！");
         }
         test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14

     ---

     

     ---

  9. typeMismatch为true，即，输入值不符合type属性值的规定。

     <!-- 此处添加一个onblur事件，方便进行测试 -->
     <!-- 此处输入“天王盖地虎”，使 typeMismatch 返回true -->
     <form>
         <label>邮箱</label>
         <input type="email" id="eMail" onblur="checkBlur(this)"/>
         <input type="submit" value="提交">
     </form>
     1
     2
     3
     4
     5
     6
     7

     var test = document.getElementById("eMail");
     var validityState =  test.validity;
     
     console.log(validityState);  //查看有效性状态
     
     function checkBlur(test) {
         if (validityState.typeMismatch) {
             console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
             console.log(test.validationMessage);//在控制台查看，错误提示信息
         } else {
             console.log("Content of input OK!输入无误！");
         }
         test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14

     ---

     

     ---

  10. valid为true，即，输入值符合所有属性的规定

      <!-- 此处添加一个onblur事件，方便进行测试 -->
      <!-- 此处输入“天王盖地虎”，使 valid 返回true -->
      <form>
          <label>姓名</label>
          <input type="text" id="userName" onblur="checkBlur(this)"/>
          <input type="submit" value="提交">
      </form>
      1
      2
      3
      4
      5
      6
      7

      var test = document.getElementById("userName");
      var validityState =  test.validity;
      
      console.log(validityState);  //查看有效性状态
      1
      2
      3
      4

      ---

      

      ---

  11. valueMissing为true，即，不进行输入操作。

      <!-- 此处添加一个onblur事件，方便进行测试 -->
      <!-- 此处不进行输入，使 valueMissing 返回true -->
      <form>
          <label>姓名</label>
          <input type="text" id="userName" onblur="checkBlur(this)" required/>
          <input type="submit" value="提交">
      </form>
      1
      2
      3
      4
      5
      6
      7

      var test = document.getElementById("userName");
      var validityState =  test.validity;
      
      console.log(validityState);  //查看有效性状态
      
      function checkBlur(test) {
          if (validityState.valueMissing) {
              console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
              console.log(test.validationMessage);//在控制台查看，错误提示信息
          } else {
              console.log("Content of input OK!输入无误！");
          }
          test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14

      ---

      

      ---

validationMessage属性

• 作用

  表示当存在约束且<input>标签不符合约束时，浏览器的提示信息。

• 状态

  只读

• 返回值

  错误提示信息（自定义或浏览器默认）或空字符串 [String]

  当不符合约束时，返回值为：自定义的错误提示信息或浏览器默认的错误提示信息；

  当符合约束时，返回值为：空字符串

• 语法

  HTMLInputElement.validationMessage
  1

• 示例

  • 自定义错误提示信息

  • 浏览器默认错误提示信息

    <!-- 此处添加一个onblur事件，方便进行测试 -->
    <!-- 此处继续输入“3.1415926-99999999”，使badInput返回true，来查看浏览器默认错误提示信息 -->
    <form>
        <label>年龄</label>
        <input type="number" id="age" onblur="checkBlur(this)" />
        <input type="submit" value="提交">
    </form>
    1
    2
    3
    4
    5
    6
    7

    var test = document.getElementById("age");
    var validityState =  test.validity;
    
    console.log(validityState);  //查看有效性状态
    
    function checkBlur(test) {
        if (validityState.badInput) {
            console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
            console.log(test.validationMessage);//在控制台查看，错误提示信息
            console.log(validityState.customError);//查看customError属性值
        } else {
            console.log("Content of input OK!输入无误！");
        }
        test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    ---

    

    ---

  • 符合约束，返回空字符串

    <!-- 此处添加一个onblur事件，方便进行测试 -->
    <!-- 此处输入正确的年龄 -->
    <form>
        <label>年龄</label>
        <input type="number" id="age" onblur="checkBlur(this)" />
        <input type="submit" value="提交">
    </form>
    1
    2
    3
    4
    5
    6
    7

    var test = document.getElementById("age");
    var validityState =  test.validity;
    
    console.log(validityState);  //查看有效性状态
    
    function checkBlur(test) {
        if (validityState.badInput) {
            console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
        } else {
            console.log("Content of input OK!输入无误！");
            console.log(test.validationMessage);//在控制台查看，错误提示信息
            console.log(validityState.customError);//查看customError属性值
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    ---

    

    ---

willValidate属性

• 作用

  表示该元素是否需要验证。

• 状态

  只读

• 返回值

  true | false [Boolean]

• 语法

  HTMLInputElement.willValidate
  1

• 示例

  • <input>需要验证，返回true

    <!-- 此处添加一个onblur事件，方便进行测试 -->
    <!-- 此处可以输入普通数字-->
    <form>
        <label>年龄</label>
        <input type="number" id="age" onblur="checkBlur(this)" />
        <input type="submit" value="提交">
    </form>
    1
    2
    3
    4
    5
    6
    7

    var test = document.getElementById("age");
    var validityState =  test.validity;
    
    console.log(validityState);  //查看有效性状态
    
    console.log(test.willValidate);//查看是否需要验证。
    
    function checkBlur(test) {
        if (validityState.badInput) {
            console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
        } else {
            console.log("Content of input OK!输入无误！");
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    ---

    

  • <input>不需要验证，返回false

    略

setCustomValidity()方法

• 作用

  为该元素设置自定义提示消息。

  **注：**该查看该方法的返回值需要使用validationMessage属性。

• 状态

  可编辑

• 返回值

  自定义消息或空字符串 [String]

  当用户的操作不满足约束时，则会返回自定义的错误提示消息；

  当用户的操作满足约束时，则会返回空字符串。

• 语法

  setCustomValidity(message)
  1

• 示例

  • 返回自定义消息
  • 返回空字符串

---

checkValidity()方法

• 作用

  查看元素是否存在约束以及是否满足约束。

• 状态

  只读

• 返回值

  true | false [Boolean]

  当元素存在约束且不符合约束规定时，返回false；

  当元素不存在约束或满足约束规定时，返回true

• 语法

  HTMLInputElement.checkValidity()
  1

• 示例

  • 元素存在约束且不符合约束规定

    <!-- 此处添加一个onblur事件，方便进行测试 -->
    <!-- 此处不输入，来查看该方法的返回值-->
    <form>
        <label>年龄</label>
        <input type="number" id="age" onblur="checkBlur(this)" required/>
        <input type="submit" value="提交">
    </form>
    1
    2
    3
    4
    5
    6
    7

    var test = document.getElementById("age");
    var validityState =  test.validity;
    
    console.log(validityState);  //查看有效性状态
    
    function checkBlur(test) {
        if (test.checkValidity()) {
            console.log("1");
        } else {
            console.log("0");
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    ---

    

    ---

  • 当元素不存在约束或满足约束规定

    略

---

拓展

reportValidity()方法

• 作用

  将浏览器的错误提示信息显示给用户。

  若<form>元素设置了novalidate 属性，则不会将信息显示给用户，即返回值为true。

• 状态

  只读

• 返回值

  true | false [Boolean]

  元素的值满足约束，则返回true；

  元素的值不满足约束，返回false，同时将错误提示信息显示给用户。

• 语法

  HTMLInputElement.reportValidity()
  1

• 示例

  • 元素的值满足约束

    <!-- 此处添加一个onblur事件，方便进行测试 -->
    <!-- 此处输入数字，来查看该方法的返回值-->
    <form>
        <label>年龄</label>
        <input type="number" id="age" onblur="checkBlur(this)" required/>
        <input type="submit" value="提交">
    </form>
    1
    2
    3
    4
    5
    6
    7

    var test = document.getElementById("age");
    var validityState =  test.validity;
    var reportValidity = test.reportValidity();
    
    console.log(validityState);  //查看有效性状态
    
    function checkBlur(test) {
        if (reportValidity) {
            console.log(reportValidity);
        } else {
            console.log(reportValidity);
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    ---

  • 元素的值不满足约束

    <!-- 此处添加一个onblur事件，方便进行测试 -->
    <!-- 此处不输入，来查看该方法的返回值-->
    <form>
        <label>年龄</label>
        <input type="number" id="age" onblur="checkBlur(this)" required/>
        <input type="submit" value="提交">
    </form>
    1
    2
    3
    4
    5
    6
    7

    var test = document.getElementById("age");
    var validityState =  test.validity;
    
    console.log(validityState);  //查看有效性状态
    
    function checkBlur(test) {
        if (validityState.valueMissing) {
            test.setCustomValidity("请输入正确的年龄！");//设置自定义的错误提示信息
            console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
            console.log(test.validationMessage);//在控制台查看，错误提示信息
        } else {
            console.log("Content of input OK!输入无误！");
        }
        test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
        console.log(test.reportValidity());
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    ---

    

    ---

小结

• 约束的静态验证，是指：调用 checkValidity()方法对约束进行验证 。

• 约束的交互验证，是指：调用 reportValidity() 方法对约束进行验证。

  若<form>元素设置了novalidate 属性，则不会发生约束的交互验证，即使调用也没有。