快捷導(dǎo)航

快速學(xué)習(xí)jQuery插件 jquery.validate.js表單驗(yàn)證插件使用方法

更新時(shí)間：2015年12月01日 14:24:52 作者：zzq58157383

快速學(xué)習(xí)jQuery插件中的jquery.validate.js表單驗(yàn)證插件使用方法，Validation是歷史最悠久的jQuery插件之一，經(jīng)過了全球范圍內(nèi)不同項(xiàng)目的驗(yàn)證，并得到了許多Web開發(fā)者的好評(píng)，感興趣的小伙伴們可以參考一下

最常使用JavaScript的場(chǎng)合就是表單的驗(yàn)證，而jQuery作為一個(gè)優(yōu)秀的JavaScript庫，也提供了一個(gè)優(yōu)秀的表單驗(yàn)證插件----Validation。Validation是歷史最悠久的jQuery插件之一，經(jīng)過了全球范圍內(nèi)不同項(xiàng)目的驗(yàn)證，并得到了許多Web開發(fā)者的好評(píng)。作為一個(gè)標(biāo)準(zhǔn)的驗(yàn)證方法庫，Validation擁有如下特點(diǎn)：

1.內(nèi)置驗(yàn)證規(guī)則：擁有必填、數(shù)字、Email、URL和信用卡號(hào)碼等19類內(nèi)置驗(yàn)證規(guī)則
2.自定義驗(yàn)證規(guī)則：可以很方便地自定義驗(yàn)證規(guī)則
3.簡(jiǎn)單強(qiáng)大的驗(yàn)證信息提示：默認(rèn)了驗(yàn)證信息提示，并提供自定義覆蓋默認(rèn)的提示信息的功能
4.實(shí)時(shí)驗(yàn)證：可能通過keyup或blur事件觸發(fā)驗(yàn)證，而不僅僅在表單提交的時(shí)候驗(yàn)證

使用方法：
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.確定哪個(gè)表單需要被驗(yàn)證

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

3.針對(duì)不同的字段，進(jìn)行驗(yàn)證規(guī)則編碼，設(shè)置字段相應(yīng)的屬性

class="required"  必須填寫 
class="required email"    必須填寫且內(nèi)容符合Email格式驗(yàn)證 
class="url"       符合URL格式驗(yàn)證 
minlength="2"   最小長(zhǎng)度為2

可驗(yàn)證的規(guī)則有19種：
required:      必選字段
remote:        "請(qǐng)修正該字段",
email:         電子郵件驗(yàn)證
url:           網(wǎng)址驗(yàn)證
date:          日期驗(yàn)證
dateISO:       日期 (ISO)驗(yàn)證
dateDE:
number:        數(shù)字驗(yàn)證
numberDE:
digits:        只能輸入整數(shù)
creditcard:    信用卡號(hào)驗(yàn)證
equalTo:       “請(qǐng)?jiān)俅屋斎胂嗤闹怠彬?yàn)證
accept:        擁有合法后綴名的字符串驗(yàn)證
maxlength/minlength:    最大/最小長(zhǎng)度驗(yàn)證
rangelength:     字符串長(zhǎng)度范圍驗(yàn)證
range:           數(shù)字范圍驗(yàn)證
max/min:         最大值/最小值驗(yàn)證
另個(gè)一種驗(yàn)證方法（將所有的與驗(yàn)證相關(guān)的信息寫到class屬性中方便管理）
1）.引入一個(gè)新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)

復(fù)制代碼代碼如下:

2）.改變調(diào)用的驗(yàn)證方法

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

3）.將驗(yàn)證規(guī)則全部編寫到class屬性中

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

也可以通過name屬性來關(guān)聯(lián)字段和驗(yàn)證規(guī)則的驗(yàn)證寫法（驗(yàn)證行為和HTML結(jié)構(gòu)完全脫鉤）

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

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

復(fù)制代碼代碼如下:

<script src="scripts/jquery.validate.messages_cn.js" type="text/javascript"></script> 

自定義驗(yàn)證信息并美化

errorElement: "em",        //可以用其他標(biāo)簽，記住把樣式也對(duì)應(yīng)修改 
success: function(label) {  //label指向上面那個(gè)錯(cuò)誤提示信息標(biāo)簽em 
   label.text("")            //清空錯(cuò)誤提示消息 
       .addClass("success");  //加上自定義的success類 
   } 
在CSS中添加樣式與之關(guān)聯(lián) 
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; 
}

自定義驗(yàn)證規(guī)則

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

以上就是關(guān)于表單驗(yàn)證插件jquery.validate.js的詳細(xì)介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: