一個簡單的實時表單驗證

以 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的一些新添加的標籤及屬性。