成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

最常使用JavaScript的場合就是表單的驗證，而jQuery作為一個優秀的JavaScript庫，也提供了一個優秀的表單驗證插件----Validation。Validation是歷史最悠久的jQuery插件之一，經過了全球范圍內不同項目的驗證，并得到了許多Web開發者的好評。作為一個標準的驗證方法庫，Validation擁有如下特點：

1.內置驗證規則： 擁有必填、數字、Email、URL和信用卡號碼等19類內置驗證規則 2.自定義驗證規則： 可以很方便地自定義驗證規則 3.簡單強大的驗證信息提示： 默認了驗證信息提示，并提供自定義覆蓋默認的提示信息的功能 4.實時驗證： 可能通過keyup或blur事件觸發驗證，而不僅僅在表單提交的時候驗證

使用方法：
1.引入jQuery庫和Validation插件

<script src="http://www.gimoo.net/t/1904/scripts/jquery-1.6.4.js" type="text/javascript"></script> 
<script src="http://www.gimoo.net/t/1904/scripts/jquery.validate.js" type="text/javascript"></script> 

2.確定哪個表單需要被驗證

<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  $("#commentForm").validate(); 
}); 
//]]> 
</script> 

3.針對不同的字段，進行驗證規則編碼，設置字段相應的屬性

class="required"  必須填寫 
class="required email"    必須填寫且內容符合Email格式驗證 
class="url"       符合URL格式驗證 
minlength="2"   最小長度為2 

可驗證的規則有19種：
required: 必選字段
remote: "請修正該字段",
email: 電子郵件驗證
url: 網址驗證
date: 日期驗證
dateISO: 日期 (ISO)驗證
dateDE:
number: 數字驗證
numberDE:
digits: 只能輸入整數
creditcard: 信用卡號驗證
equalTo: “請再次輸入相同的值”驗證
accept: 擁有合法后綴名的字符串驗證
maxlength/minlength: 最大/最小長度驗證
rangelength: 字符串長度范圍驗證
range: 數字范圍驗證
max/min: 最大值/最小值驗證
另個一種驗證方法（將所有的與驗證相關的信息寫到class屬性中方便管理）
1）.引入一個新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)

<script src="http://www.gimoo.net/t/1904/scripts/jquery.metadata.js" type="text/javascript"></script>

2）.改變調用的驗證方法

<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  //將$("#commentForm").validate(); 改成 
  $("#commentForm").validate({meta: "validate"}); 
}); 
//]]> 
</script> 

3）.將驗證規則全部編寫到class屬性中

class="{validate:{required: true, minlength: 2, messages:{required:'請輸入姓名', minlength:'請至少輸入兩個字符'}}}" 
class="{validate:{required: true, email: true, messages:{required:'請輸入電子郵件', email:'請檢查電子郵件的格式'}}}"    

也可以通過name屬性來關聯字段和驗證規則的驗證寫法（驗證行為和HTML結構完全脫鉤）

$("#commentForm").validate({ 
  rules: { 
   username: { 
     required: true, 
     minlength: 2 
   }, 
   email: { 
     required: true, 
     email: true 
   }, 
   url:"url", 
   comment: "required" 
  }, 
  messages: { 
   username: { 
     required: '請輸入姓名', 
     minlength: '請至少輸入兩個字符' 
   }, 
   email: { 
     required: '請輸入電子郵件', 
     email: '請檢查電子郵件的格式' 
   }, 
   url: '請檢查網址的格式', 
   comment: '請輸入您的評論' 
  } 
}); 

國際化
Validation插件的驗證信息默認語言是英文，如果要改成中文，只需要引入Validation提供的中文驗證信息即可，引入代碼如下：

<script src="http://www.gimoo.net/t/1904/scripts/jquery.validate.messages_cn.js" type="text/javascript"></script>

自定義驗證信息并美化

errorElement: "em",        //可以用其他標簽，記住把樣式也對應修改 
success: function(label) {  //label指向上面那個錯誤提示信息標簽em 
   label.text("")            //清空錯誤提示消息 
       .addClass("success");  //加上自定義的success類 
   } 
在CSS中添加樣式與之關聯 
em.error { 
   background:url("images/unchecked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
} 
em.success { 
   background:url("images/checked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
} 

自定義驗證規則

//自定義一個驗證方法 
$.validator.addMethod( 
  "formula", //驗證方法名稱 
  function(value, element, param) {//驗證規則 
    return value == eval(param); 
  },  
  '請正確輸入數學公式計算后的結果'//驗證提示信息 
); 
 
$("#commentForm").validate({ 
  rules: { 
   username: { 
     required: true, 
     minlength: 2 
   }, 
   email: { 
     required: true, 
     email: true 
   }, 
   url:"url", 
   comment: "required", 
   valcode: { 
     formula: "7+9" 
   } 
  }, 
  messages: { 
   username: { 
     required: '請輸入姓名', 
     minlength: '請至少輸入兩個字符' 
   }, 
   email: { 
     required: '請輸入電子郵件', 
     email: '請檢查電子郵件的格式' 
   }, 
   url: '請檢查網址的格式', 
   comment: '請輸入您的評論', 
   valcode: '驗證碼錯誤' 
  } 
}); 

以上就是關于表單驗證插件jquery.validate.js的詳細介紹，希望對大家的學習有所幫助。

jquery