一个简单的实时表单验证

以 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 numb