表單數值介於指定區間驗證

admin發表於2019-03-29

很多時候，輸入的數字的大小是有限制的。

HTML5提供了非常簡單的方式實現，完全不需要JavaScript配合。

首先看一個使用傳統方式實現此功能的程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script>
window.onload=()=>{
  let otxt=document.getElementById("txt");
  let obt=document.getElementById("bt");
  let ckNum=(num,min,max)=>{
    if(num<min){
      alert("數字不能小於"+min);
    }else if(num>max){
      alert("數字不能大於"+max);
    }
  }
  obt.onclick=()=>{
    let num=parseInt(otxt.value);
    ckNum(num,2,5);
  }
}
</script>  
</head> 
<body> 
<form action="#" method="post">
  <input type="text" id="txt"/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body> 
</html>

當文字框輸入的數字不在2-5之間時，會彈出提示。

HTML5實現了更為便捷的驗證方式，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>  
</head> 
<body> 
<form action="#" method="post">
  <input type="number" id="txt" min="5" max="10"/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body> 
</html>

程式碼分析如下：

（1）.min屬性規定輸入數字的最小值。

（2）.max屬性規定輸入數字的最大值。

（3）.如果數字沒有介於上述區間，那麼會彈出提示。

相關文章