（转）jquery插件Validate的使用
生活随笔
收集整理的這篇文章主要介紹了
（转）jquery插件Validate的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在做網頁表單時時常需要在客戶端對表單填寫的數據進行驗證一番才能提交，我們可以通過自己編寫JavasScript代碼來驗證，但是有時數據量過多時就會有些難度了?；趈Query的jquery.validate驗證框架幫我們解決了困難，我們可以通過它迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法，而且對國際化也有非常好的支持。
今天記錄的就是用此插件來實現表單驗證，效果圖：
??
?
1、獲取JS文件：http://jqueryvalidation.org/，這個插件的用法就不再多講了，如不熟悉或者還沒用過的可以通過官網了解也可以搜索jquery validate中文API，此文僅僅記錄如何實現上圖效果。
2、導入JS
?
<script?src="test/jquery.js"?type="text/javascript"></script><script?src="test/jquery.validate.js"?type="text/javascript"></script>
3、創建表單
?
<fieldset?style="width:700px;?margin:0?auto;">????<legend>用戶注冊</legend>
????<form?id="signupForm"?method="get"?action="">
????????<p>
????????????<label?for="firstname">用戶名：</label>
????????????<input?id="firstname"?name="firstname"?type="text"?/>
????????????<span?class="red">*</span>
????????</p>
????????<p>
????????????<label?for="realname">真實名：</label>
????????????<input?id="realname"?name="realname"?type="text"?/>
????????</p>
????????<p>
????????????<label?for="password">密 碼：</label>
????????????<input?id="password"?name="password"?type="password"?/>
????????????<span?class="red">*</span>
????????</p>
????????<p>
????????????<label?for="confirm_password">確 認：</label>
????????????<input?id="confirm_password"?name="confirm_password"?type="password"?/>
????????????<span?class="red">*</span>
????????</p>
????????<p>
????????????<label?for="email">郵 箱：</label>
????????????<input?id="email"?name="email"?type="text"?/>
????????????<span?class="red">*</span>
????????</p>
????????<p>
????????????<label?for="tel">電 話：</label>
????????????<input?id="tel"?name="tel"?type="text"?/>
????????</p>
????????<p>
????????????<label?for="address">地 址：</label>
????????????<input?id="address"?name="address"?type="text"?/>
????????</p>
????????<p>
????????????<label?for="idcard">證件號：</label>
????????????<input?id="idcard"?name="idcard"?type="text"?/>
????????</p>
????????<p>
????????????<label?for="degree">學 歷：</label>
????????????<select?id="degree"?name="degree">
????????????????<option?value="-1">請選擇</option>
????????????????<option?value="1">小學</option>
????????????????<option?value="2">中學</option>
????????????????<option?value="3">大專</option>
????????????????<option?value="4">本科</option>
????????????????<option?value="5">學士</option>
????????????????<option?value="6">碩士</option>
????????????????<option?value="7">博士</option>
????????????</select>
????????</p>
????????<p>
????????????<label?for="sex">性 別：</label>
????????????<input?type="radio"?id="rdoFemale"?name="sex"?/>男
????????????<input?type="radio"?id="rdoMale"?name="sex"?/>女
????????????<input?type="radio"?id="rdoSecret"?name="sex"?/>保密
????????</p>
????????<p>????????????
????????????<input?id="read"?name="read"?type="checkbox"?/><label?for="read">同意相關條約</label>
????????</p>
????????<p>
????????????<input?class="submit"?type="submit"?value="Register"/>
????????</p>
????</form>
</fieldset>
4、表單初始化樣式
?
.red{?color:red;}.submit{?width:80px;}
input{height:22px;?padding:2px;}
?
5、驗證代碼?
?
$(document).ready(function()?{?????
????//設置默認屬性
????$.validator.setDefaults({???????
????????submitHandler:?function(form)?{????
????????????form.submit();????
???????}
????}),
?????
????//開始驗證
????$("#signupForm").validate({???????????????????????
????????rules:?{
????????????firstname:?{
????????????????required:?true,
????????????????stringCheck:true,???
????????????????byteRangeLength:[4,15]
????????????},
????????????realname:?{
????????????????minlength:5
????????????},
????????????password:?{
????????????????required:?true,
????????????????minlength:?5
????????????},
????????????confirm_password:?{
????????????????required:?true,
????????????????minlength:?5,
????????????????equalTo:?"#password"
????????????},
????????????email:?{
????????????????required:?true,
????????????????email:?true
????????????},
????????????tel:?{
????????????????isMobile:?true
????????????},
????????????address:?{
????????????????stringCheck:true,???
????????????????byteRangeLength:[4,100]
????????????},
????????????read:?{
????????????????required:true
????????????},
????????????degree:?{
????????????????required:true,
????????????????min:0
????????????},
????????????idcard:?{
????????????????required:true,
????????????????isIdCardNo:true
????????????}???
????????},
????????//設置提示信息
????????messages:{
????????????address:{
????????????????stringCheck:?"請正確輸入您的聯系地址",???
????????????????byteRangeLength:?"請詳實您的聯系地址以便于我們聯系您"
????????????},
????????????read:{
????????????????required:"請先閱讀注冊條約"
????????????},
????????????degree:{
????????????????min:"請選擇學歷"
????????????}
????????},
????????//設置錯誤信息存放標簽
????????errorElement:?"em",
????????//指定錯誤信息位置
????????errorPlacement:?function?(error,?element)?{?
????????????if?(element.is(':radio')?||?element.is(':checkbox'))?{
????????????????var?eid?=?element.attr('name');
????????????????error.appendTo(element.parent());
????????????}?else?{
????????????????error.appendTo(element.closest("p"));
????????????}
????????},
????????//設置驗證觸發事件
????????focusInvalid:?true,
????????//設置驗證成功提示格式
????????success:function(e)
????????{
????????????e.html(" ").addClass("valid").text('ok');
????????}
????})
});
到這里表單驗證功能就初步完成了，可以試著預覽一下效果，點擊按鈕提交你肯定發現不會進行驗證，因為在驗證中使用了一些自定義的方法，所以驗證失效，那么繼續讀下去吧，接下來是實現驗證的提示信息的個性化和自定義驗證方法。
6、我們可以知道validate默認的提示信息是英文的，我們可以編寫一個jquery.validate.message_cn.js文件來改變它的提示內容并讓提示內容顯示成中文的：?
?
//定義中文消息var?cnmsg?=?{
????required:?"必需填寫項",
????remote:?"請修正該字段",
????email:?"請輸入正確格式的電子郵件",
????url:?"請輸入合法的網址",
????date:?"請輸入合法的日期",
????dateISO:?"請輸入合法的日期?(ISO).",
????number:?"請輸入合法的數字",
????digits:?"只能輸入整數",
????creditcard:?"請輸入合法的信用卡號",
????equalTo:?"請再次輸入相同的值",
????accept:?"請輸入擁有合法后綴名的字符串",
????maxlength:?jQuery.format("請輸入一個長度最多是?{0}?的字符串"),
????minlength:?jQuery.format("請輸入一個長度最少是?{0}?的字符串"),
????rangelength:?jQuery.format("請輸入一個長度介于?{0}?和?{1}?之間的字符串"),
????range:?jQuery.format("請輸入一個介于?{0}?和?{1}?之間的值"),?
????max:?jQuery.format("請輸入一個最大為?{0}?的值"),
????min:?jQuery.format("請輸入一個最小為?{0}?的值"),
?????
????//自定義驗證方法的提示信息
????stringCheck:?"用戶名只能包括中文字、英文字母、數字和下劃線",???
????byteRangeLength:?"用戶名必須在4-15個字符之間(一個中文字算2個字符)",
????isIdCardNo:?"請正確輸入您的身份證號碼",
};
jQuery.extend(jQuery.validator.messages,?cnmsg);
可以看到此文件中有一個自定義驗證方法的提示信息，這些驗證方法也是讓之前預覽沒有驗證效果的原兇哦，validate插件提供自定義驗證方法，繼續完善jquery.validate.message_cn.js(自定義驗證方法來源于網絡)?文件：?
?
//?字符驗證???????jQuery.validator.addMethod("stringCheck",?function(value,?element)?{???????
????return?this.optional(element)?||?/^[\u0391-\uFFE5\w]+$/.test(value);???????
},?"只能包括中文字、英文字母、數字和下劃線");???
?
//?中文字兩個字節???????
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]?);???????
},?"請確保輸入的值在4-15個字節之間(一個中文字算2個字節)");
?
//?身份證號碼驗證??????
jQuery.validator.addMethod("isIdCardNo",?function(value,?element)?{???????
????return?this.optional(element)?||?isIdCardNo(value);???????
},?"請正確輸入您的身份證號碼");
?
/**?
?*?身份證號碼驗證
?*/?
function?isIdCardNo(num)?{??
???
?var?factorArr?=?new?Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);??
?var?parityBit=new?Array("1","0","X","9","8","7","6","5","4","3","2");??
?var?varArray?=?new?Array();??
?var?intValue;??
?var?lngProduct?=?0;??
?var?intCheckDigit;??
?var?intStrLen?=?num.length;??
?var?idNumber?=?num;??
???//?initialize??
?????if?((intStrLen?!=?15)?&&?(intStrLen?!=?18))?{??
?????????return?false;??
?????}??
?????//?check?and?set?value??
?????for(i=0;i<intStrLen;i++)?{??
?????????varArray[i]?=?idNumber.charAt(i);??
?????????if?((varArray[i]?<?'0'?||?varArray[i]?>?'9')?&&?(i?!=?17))?{??
?????????????return?false;??
?????????}?else?if?(i?<?17)?{??
?????????????varArray[i]?=?varArray[i]?*?factorArr[i];??
?????????}
?????}
????????
?????if?(intStrLen?==?18)?{
?????????//check?date
?????????var?date8?=?idNumber.substring(6,14);
?????????if?(isDate8(date8)?==?false)?{
????????????return?false;
?????????}
?????????//?calculate?the?sum?of?the?products??
?????????for(i=0;i<17;i++)?{
?????????????lngProduct?=?lngProduct?+?varArray[i];
?????????}
?????????//?calculate?the?check?digit
?????????intCheckDigit?=?parityBit[lngProduct?%?11];
?????????//?check?last?digit
?????????if?(varArray[17]?!=?intCheckDigit)?{
?????????????return?false;
?????????}
?????}
?????else{???//length?is?15
?????????//check?date
?????????var?date6?=?idNumber.substring(6,12);
?????????if?(isDate6(date6)?==?false)?{
?????????????return?false;
?????????}
?????}
?????return?true;
?}
在文件中導入jquery.validate.message_cn.js文件?
?
<script?src="test/jquery.validate.message_cn.js"?type="text/javascript"></script>轉載于:https://www.cnblogs.com/hushuai1314/p/6635619.html
總結
以上是生活随笔為你收集整理的（转）jquery插件Validate的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php代码优化 -- array_wal
- 下一篇： Centos6.5子域名绑定子目录