js驗證表單項是否為空例項程式碼

antzone發表於2017-03-14
JS

表單驗證幾乎在每一個需要註冊或者登陸的網站是必不可少的，有些驗證則非常的複雜，可以說是各種各樣給你的要求，不過本章節只介紹一下表單中最簡單的驗證方式，就是判斷是否為空，有些要求比較低的網站對此已經滿足需要了。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" /> 
<title>js簡單表單驗證-螞蟻部落</title> 
<script type="text/javascript">
window.onload=function()
{
  var bt=document.getElementById("bt");
  bt.onclick=function()
  {
    if(document.myform.name.value=="")
    {
      alert("使用者名稱不能為空!");
      document.myform.name.focus();
      return false;
    } 
    else if(document.myform.pw.value=="")
    {
      alert("密碼不能為空!");
      document.myform.pw.focus();
      return false; 
    }
  }
}
</script>
</head>
<body>
<form action="index.php" method="get" name="myform">
<ul>
  <li>姓名:<input type="text" name="name" id="name" /></li>
  <li>密碼:<input  type="text" name="pw" id="age" /></li>
  <li><input type="submit" id="bt"/></li>
</ul>      
</form>
</body>
</html>

以上程式碼，當點選提交按鈕的時候，能夠進行簡單的表單驗證，如果表單項為空，那麼就會彈出提示，並且將焦點放入當前表單項，程式碼比較簡單，這裡距不多介紹了，可以參閱相關閱讀。

相關閱讀:

1.document.getElementById()可以參閱document.getElementById()一章節。

2. onclick事件可以參閱javascript click 事件一章節。 

相關文章