HTML5中表单验证

HTML5增加了大量的表单属性的同时，也增加了表单提交时的验证功能，下面自己总结了一下。

表单的自动验证

<form action="" method="post">
    <input type="text" name="text" required pattern="\d{3}">
    <input type="submit">
  </form>

1.required属性

应用在大部分元素(除了隐藏元素、图片、提交按钮等)，提交时，内容为空，则提示‘请填写此字段’

2.pattern属性

通常值是正则表达式，提交时，若输入的内容不符合就会提示”请与所请求的格式保持一致”
注意：不同的浏览器提示信息是不同的，我的是在chrome浏览器做的验证

3.min和max属性

min与max是数值类型或者日期类型的input元素专用的属性，他们限制了在input元素中输入的数值与日期的范围

4.step属性

step属性控制input元素的增加或者减少

<input type="number" min="10" max="100" step="10">

显示验证

<form action="" onsubmit="return check();">
   <label for="email">email:</label>
   <input type="email" id="email" name="email">
   <input type="submit" value="提交">
 </form>
   <script>
   var email = document.getElementById('email');
   function check(){
     if(email.value == ''){
       alert('请输入邮箱');
       return false;
     }else if(!email.checkValidity()){
       alert('请输入正确的邮箱');
     }else{
        alert('您输入的邮箱正确');
     }

   }
 </script>

另外input元素和form元素中都有一个validity属性，它返回的是一个ValidityState对象，该对象中有一个最重要的属性valid,判断表单是否有效

取消验证

1. formnovalidate属性:对input或者submit元素，中的单个取消表单验证，但是如果对submit设置了该属性也相当于对所有的表单元素取消验证了；
2. novalidate属性:form表单属性，对所有的表单元素取消验证。

自定义错误信息

在HTML5中，可以使用javascript中的setCustomValidity方法来自己定义错误的提示信息

<form onsubmit="return check2();">
  <label for="pass1">密码：</label>
  <input type="password" id="pass1" name="pass1"><br>
  <label for="pass2">重复密码：</label>
  <input type="password" id="pass2" name="pass2"><br>
  <label for="email">email:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit">
</form>
<script>
  function check2(){
      var pass1 = document.getElementById('pass1');
      var pass2 = document.getElementById('pass2');
      var email = document.getElementById('email');
      if(pass1.value !== pass2.value){
        pass2.setCustomValidity('密码不一致');
      }else{
         pass2.setCustomValidity('');
      }
      if(!email.checkValidity()){
        email.setCustomValidity('请输入正确的email');
      }
    }
  // opera是目前唯一的支持自定义错误信息的浏览器。
</script>