快速學習jQuery外掛程式 jquery.validate.js表單驗證外掛程式使用方法_jquery

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

• 1.內建驗證規則： 擁有必填、數字、Email、URL和信用卡號碼等19類內建驗證規則
• 2.自訂驗證規則： 可以很方便地自訂驗證規則
• 3.簡單強大的驗證資訊提示： 預設了驗證資訊提示，並提供自訂覆蓋預設的提示資訊的功能
• 4.即時驗證： 可能透過keyup或blur事件觸發驗證，而不僅在表單提交的時候驗證

使用方法：
1.引入jQuery庫和Validation外掛

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script> 
<script src="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插件)

複製程式碼 程式碼如下:

 

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提供的中文驗證資訊即可，引入程式碼如下：

複製程式碼

複製程式碼

程式碼如下:

 

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的詳細介紹，希望對大家的學習有幫助。