jquery.validate表單驗(yàn)證插件使用方法解析

更新時(shí)間：2016年11月07日 14:54:56 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了jquery.validate表單驗(yàn)證插件使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

為什么要用jquery validate這個(gè)表單驗(yàn)證插件：自己寫一個(gè)通用且功能全面強(qiáng)大的jquery表單驗(yàn)證插件并不容易。jquery validate這個(gè)jquery插件幾乎可以輕松應(yīng)對(duì)95%以上的表單驗(yàn)證，具體內(nèi)容如下

使用方式

1、在控件中使用默認(rèn)驗(yàn)證規(guī)則，例子：
電子郵件(必填)
<input id="email" class="required email" value="email@" />

2、可以在控件中自定義驗(yàn)證規(guī)則，例子：
自定義(必填,[3,5])

<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,
messages:{required:'為什么不輸入一點(diǎn)文字呢',minlength:'輸入的太少了',maxlength:'輸入那么多干嘛'}}" />

3、通過javascript自定義驗(yàn)證規(guī)則，下面的JS自定義了兩個(gè)規(guī)則，password和confirm_password

$().ready(function() {
 $("#form2").validate({
 rules: {
  password: {
  required: true,
  minlength: 5
  },
  confirm_password: {
  required: true,
  minlength: 5,
  equalTo: "#password"
  }
 },
 messages: {
  password: {
  required: "沒有填寫密碼",
  minlength: jQuery.format("密碼不能小于{0}個(gè)字符")
  },
  confirm_password: {
  required: "沒有確認(rèn)密碼",
  minlength: "確認(rèn)密碼不能小于{0}個(gè)字符",
  equalTo: "兩次輸入密碼不一致嘛"
  }
 }
 });
});

required除了設(shè)置為true/false之外，還可以使用表達(dá)式或者函數(shù)，比如

$("#form2").validate({
 rules: {
 funcvalidate: {
 required: function() {return $("#password").val()!=""; }
 }
 },
 messages: {
 funcvalidate: {
 required: "有密碼的情況下必填"
 }
 }
});

Html

密碼<input id="password" name="password" type="password" />
確認(rèn)密碼<input id="confirm_password" name="confirm_password" type="password" />
條件驗(yàn)證<input id="funcvalidate" name="funcvalidate" value="" />

4、使用meta自定義驗(yàn)證信息

首先用JS設(shè)置meta

$("#form3").validate({ meta: "validate" });

Html

email<input class="{validate:{required:true, email:true, 
messages:{required:'輸入email地址', email:'你輸入的不是有效的郵件地址'}}}"/>

5、使用meta可以將驗(yàn)證規(guī)則寫在自定義的標(biāo)簽內(nèi)，比如validate

JS設(shè)置meta

$().ready(function() {
 $.metadata.setType("attr", "validate");
 $("#form1").validate();
});

Html

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

<input id="email" name="email" validate="{required:true, email:true, messages:{required:'輸入email地址', email:'你輸入的不是有效的郵件地址'}}" />

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

對(duì)于復(fù)雜的驗(yàn)證，可以通過jQuery.validator.addMethod添加自定義的驗(yàn)證規(guī)則

官網(wǎng)提供的additional-methods.js里包含一些常用的驗(yàn)證方式，比如lettersonly，ziprange，nowhitespace等

例子

// 字符驗(yàn)證 
jQuery.validator.addMethod("userName", function(value, element) {
 return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用戶名只能包括中文字、英文字母、數(shù)字和下劃線"); 

//然后就可以使用這個(gè)規(guī)則了
$("#form1").validate({
 // 驗(yàn)證規(guī)則
 rules: {
 userName: {
  required: true,
  userName: true,
  rangelength: [5,10]
 }
 },
 /* 設(shè)置錯(cuò)誤信息 */
 messages: {
 userName: {
  required: "請(qǐng)?zhí)顚懹脩裘?,
  rangelength: "用戶名必須在5-10個(gè)字符之間" 
 }  
 },
});

7、radio、checkbox、select的驗(yàn)證方式類似

radio的驗(yàn)證

 性別
<span>
 男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br />
 女<input type="radio" id="gender_female" value="f" name="gender" />
</span>

checkbox的驗(yàn)證

最少選擇兩項(xiàng)

<span>
 選項(xiàng)1<input type="checkbox" id="check_1" value="1" name="checkGroup" 
 class="{required:true,minlength:2, messages:{required:'必須選擇',minlength:'至少選擇2項(xiàng)'}}" /><br />
 選項(xiàng)2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />
 選項(xiàng)3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />
</span>

select的驗(yàn)證

下拉框

<span>
 <select id="selectbox" name="selectbox" class="{required:true}">
 <option value=""></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 </select>
</span>

8、Ajax驗(yàn)證

用remote可以進(jìn)行Ajax驗(yàn)證

remote: {
url: "url", //url地址
type: "post",  //發(fā)送方式
dataType: "json", //數(shù)據(jù)格式 data: {   //要傳遞的數(shù)據(jù)
 username: function() {
 return $("#username").val();
 }}
}

驗(yàn)證用戶多種信息：

<script type="text/javascript"></script>
// 手機(jī)號(hào)碼驗(yàn)證
jQuery.validator.addMethod("mobile", function(value, element) {
 var length = value.length;
 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
 return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機(jī)號(hào)碼格式錯(cuò)誤"); 

// 電話號(hào)碼驗(yàn)證 
jQuery.validator.addMethod("phone", function(value, element) {
 var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
 return this.optional(element) || (tel.test(value));
}, "電話號(hào)碼格式錯(cuò)誤");

// 郵政編碼驗(yàn)證 
jQuery.validator.addMethod("zipCode", function(value, element) {
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
}, "郵政編碼格式錯(cuò)誤");

// QQ號(hào)碼驗(yàn)證 
jQuery.validator.addMethod("qq", function(value, element) {
 var tel = /^[1-9]\d{4,9}$/;
 return this.optional(element) || (tel.test(value));
}, "qq號(hào)碼格式錯(cuò)誤");

// IP地址驗(yàn)證
jQuery.validator.addMethod("ip", function(value, element) {
 var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
 return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式錯(cuò)誤");

// 字母和數(shù)字的驗(yàn)證
jQuery.validator.addMethod("chrnum", function(value, element) {
 var chrnum = /^([a-zA-Z0-9]+)$/;
 return this.optional(element) || (chrnum.test(value));
}, "只能輸入數(shù)字和字母(字符A-Z, a-z, 0-9)");

// 中文的驗(yàn)證
jQuery.validator.addMethod("chinese", function(value, element) {
 var chinese = /^[\u4e00-\u9fa5]+$/;
 return this.optional(element) || (chinese.test(value));
}, "只能輸入中文");

// 下拉框驗(yàn)證
$.validator.addMethod("selectNone", function(value, element) {
 return value == "請(qǐng)選擇";
}, "必須選擇一項(xiàng)");

// 字節(jié)長度驗(yàn)證
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
 var length = value.length;
 for (var i = 0; i < value.length; i++) {
 if (value.charCodeAt(i) > 127) {
  length++;
 }
 }
 return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("請(qǐng)確保輸入的值在{0}-{1}個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))"));

參考學(xué)習(xí)：功能強(qiáng)大的jquery.validate表單驗(yàn)證插件

本文已被整理到了《jquery表單驗(yàn)證大全》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: