一个简单的实时表单验证

以 number为例子。

首先，

在html部分只要包含：label, 表单，以及错误信息提示。这里有错误信息，是为了保证我们的表单不是在提交那一刻才提示你填写的不对，而是在你输入时或者输入完，这个预备的表单错误信息就可以显示出来。

<div>
  <label> email:</label>
  <input type="email" required id="email"/>
</div>
<br/><br/>
<div>
  <label>  number:  </label>
  <input type="number" min="10" max="20" id="number"/>
  <span id="numberValid">输入的数值范围需在10-20之间</span>
</div>

其次是样式部分：

这里只写必须的简单样式，根据个人需要，可以做调整和增加。

  <style>
    input:invalid{
      border:2px solid red;
    }
    input[type='number']+span{
      display:none;
      color:red;
    }
  </style>

最后是js的部分

 var number=document.getElementById('number');
  var numberValid=document.getElementById('numberValid')
  number.addEventListener('input',function(){
    var inputValue=this.value;
    if(inputValue>20||inputValue<10){
      numberValid.style.display='inline-block';
//      this.setCustomValidity('输入的数值范围需在10-20之间')
    }else{
      numberValid.style.display='none';
//      this.setCustomValidity('')
    }
  })

这样在用户输入时，当不在此范围内时，首先css的:invalid伪类会使输入框变红，其次js部分，会对输入的值的范围进行判断，当不在允许范围内，会将错误提示显示出来。

效果如下

这样一个简单的表单验证就实现了，结合h5的一些新添加的标签及属性。