jQuery表單驗證效果詳解

admin發表於2018-11-24
jQuery

表單驗證是功能的必選項，否則可能會出現各種安全問題，當表單驗證不通過的時候，會出現各種提示，為了提示醒目，兼顧美觀，表單驗證都會進行各種美化，下面分享一個簡單的表單驗證效果，供初學者參考。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
body, input, textarea {
  font-size:12px;
  line-height:18px;
  font-family:Verdana, Geneva, sans-serif;
}
input {width:200px;}
.submit {width:120px;}
#error {
  color:red;
  font-size:10px;
  display:none;
}
.needsfilled{
  background:#DD36B3;
  color:white;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  required = ["name", "email", "message"];
  email = $("#email");
  errornotice = $("#error");
  emptyerror = "請填寫相關內容";
  emailerror = "請填寫一個有效的右鍵地址";
  $("#theform").submit(function(){ 
    for (var index=0;index<required.length;index++) {
      var input = $('#'+required[index]);
      if ((input.val() == "") || (input.val() == emptyerror)) {
        input.addClass("needsfilled");
        input.val(emptyerror);
        errornotice.fadeIn(750);
      } 
      else {
        input.removeClass("needsfilled");
      }
    }
 
    if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){
      email.addClass("needsfilled");
      email.val(emailerror);
    }
    if ($(":input").hasClass("needsfilled")) {
      return false;
    } 
    else {
      errornotice.hide();
      return true;
    }
  });
  $(":input").focus(function(){  
    if ($(this).hasClass("needsfilled") ) {
      $(this).val("");
      $(this).removeClass("needsfilled");
    }
  });
}); 
</script>
</head>
<body>
<form id="theform" name="theform" method="post">
<p>
  <label for="name">姓名</label><br />
  <input id="name" type="text" value="" name="name" />
</p>
<p>
  <label for="email">郵箱</label><br />
  <input id="email" type="text" value="" name="email" />
</p>
 <p>
  <label for="message">資訊內容</label><br />
  <textarea id="message" rows="7" cols="30" name="message"></textarea>
</p>
<p><input class="submit" type="submit" name="submit" value="提交表單" /></p>
<p id="error">表單中有錯誤資訊！</p>
</form>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.required = ["name", "email", "message"]，一個陣列儲存有表單元素的id屬性值。

（3）.email = $("#email")，獲取郵箱表單元素。

（4）.errornotice = $("#error")，獲取錯誤提醒元素。

（5）.emptyerror = "請填寫相關內容"，表單為空提示內容。

（6）.emailerror = "請填寫一個有效的右鍵地址"，郵箱格式錯誤提示內容。

（7）.$("#theform").submit(function(){})，為表單註冊提交submit事件處理函式。

（8）.for (var index=0;index<required.length;index++) {}，遍歷陣列中的每一個元素。

（9）.var input = $('#'+required[index])，獲取對應id的表單元素。

（10）.if ((input.val() == "") || (input.val() == emptyerror)) {

  input.addClass("needsfilled");

  input.val(emptyerror);

  errornotice.fadeIn(750);

}如果表單的內容為空或者是錯誤提示內容。

那麼就新增needsfilled樣式類，那麼表單背景變為粉紅色。

然後寫入提示文字，並且錯誤顯示內容。

（11）.else {

  input.removeClass("needsfilled");

}，否則刪除指定的樣式類，也就是不讓表單元素背景變為粉紅色。

（12）if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){

  email.addClass("needsfilled");

  email.val(emailerror);

}，驗證郵箱是否合法。

如果不合法，那麼就將表單元素的背景色設定為粉紅色。

並寫入提示文字。

（13）.if ($(":input").hasClass("needsfilled")) {

  return false;

} 

else {

  errornotice.hide();

  return true;

}如果表單元素具有樣式類needsfilled,說明表單元素並非都是合法的。

那麼就取消表單提交效果。

否則的話，隱藏提示元素，然後提交表單。

（14）.$(":input").focus(function(){  

  if ($(this).hasClass("needsfilled") ) {

    $(this).val("");

    $(this).removeClass("needsfilled");

  }

})，為表單元素註冊focus事件處理函式。

如果表單元素具有指定的樣式類，那麼將其清空，並且移除此樣式類。

二.相關閱讀:

（1）.submit事件參閱jQuery submit事件一章節。

（2）.val()參閱jQuery val()一章節。

（3）.fadeIn()參閱jQuery fadeIn()一章節。

（4）.addClass()參閱jQuery addClass()一章節。

（5）.removeClass()參閱jQuery removeClass()一章節。

（6）.test()參閱正規表示式test()一章節。

（7）.hasClass()參閱jQuery hasClass()一章節。

相關文章