Javascript高级编程学习笔记（78）—— 表单（6）HTML约束验证API

自动切换焦点

使用JS可以极大地提升表单的易用性

其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段

以下方的HTML代码为例：

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="4">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

上方的代码给出了输入电话号码的例子

针对这样的HTML结构，我们可以使用下面的代码来完成自动切换焦的功能

(function(){
    function tabForward(event){
       var target = event.target;
       if(target.value.length == target.maxLength){
              var form = target.form;
              for(let i = 0,len=form.elements.length;i< len;i++){
                  if(form.elements[i]==target){
                      if(form.elements[i+1]){
                          form.elementsp[i+1].focus();// 将焦点切换到下一个文本框
                      }
                      return;
　　　　　　　　　　 }
              }
       }
    }
    let textbox1 = document.getElementById("txtTel1");
    let textbox2 = document.getElementById("txtTel2");
    let textbox3 = document.getElementById("txtTel3");

    textbox1.addEventListener("keyup",tabForward,false);
    textbox2.addEventListener("keyup",tabForward,false);
    textbox3.addEventListener("keyup",tabForward,false);
})();

PS. 上述代码只适用于之前的HTML结构，并且没有考虑隐藏字段

HTML5约束验证API

为了在将表单提交到服务器之前验证数据，HTML5新增了一些功能

这些功能可以让我们在JS没有正确加载的情况下也能完成基本的数据验证

1. 必填字段

   <input type="text" name="username" required>

   标注有required的字段在表单提交时都不能空着

2. 其他输入类型

   <!--输入的文本必须符合电子邮件格式-->
   <input type="email" name="email">
   <!--输入文本需要符合 url 格式-->
   <input type="url" name="homepage">

   若不设置 required 那么空文本也会通过验证

3. 数值范围

   <input type="number" min="0" max="100" step="5" name="count">

   这样可以让用户只能输入 0~100的数值，并且必须是5的倍数，此外还支持以下类型

   1. "range"
   2. "datetime"
   3. "datetime-local"
   4. "date"
   5. "month"
   6. "week"
   7. "time"
   • 以上类型可能不会得到浏览器良好的支持　　
4. 输入模式

   <input type="text" pattern="\d+" name="count">
   <!--模式的开头和末尾不用加^和$-->

   该模式在JS中可以通过 pattern 属性访问

5. 检测有效性
   1. 使用 checkValidity（） 方法可以检测表单字段的有效性，判断依据就是前面介绍的约束
   2. 该方法返回true或false
   3. 所有表单字段都有该方法，如果要对整个表单进行验证那么只需要在表单上调用该方法即可
   4. 此外可以通过 validity 属性获取详细的验证信息，该属性包含一个对象，该对象有以下属性
      • customError：是否设置 setCustomValidity（）
      • patternMismatch：是否与指定的 pattern 匹配
      • rangeOverflow：比max大则返回 true
      • rangeUnderflow：比min小则返回 true
      • stepMisMatch：step不合理返回 true
      • tooLang：超出maxlength，部分浏览器会对长度进行约束，所以该值可能一直都是false
      • typeMismatch：输入的格式与type值不同
      • valid：其他属性都为false，该值为true（checkValidity（）方法返回的就是该值）
      • valueMissing：标注required的字段中没有值则为true
   5. 之前的约束只会提示用户不符合要求，并不会阻止用户输入　　　　　　
6. 禁用验证

   <form method="post" action="sign.php" novalidate>
   </form>

   novalidate可以让提交按钮不验证该表单