為什么要用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
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é)長(zhǎng)度驗(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í)閱讀。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注