jQuery验证插件
學習要點：
1.使用 validate.js 插件
2.默認驗證規則
3.validate()方法和選項
4.validate.js 其他功能
?
?
驗證插件（validate.js），是一款驗證常規表單數據合法性的插件。使用它，極大的解放了在表單上繁雜的驗證過程，并且錯誤提示顯示的完善也增加了用戶體驗。
?
一．使用 validate.js 插件
官網下載：http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是validate.js，還有兩個可選的輔助文件：additional-methods.js（控件 class方式）和 message_zh.js（提示漢化）文件（實際使用，請使用 min 壓縮版） 。
第一步：引入 validate.js
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步：在 JS 文件中執行
$('#reg').validate();
二．默認驗證規則
Validate.js 的默認驗證規則的寫法有兩種形式：1.控件屬性方式；2.JS 鍵值對傳參方式。
//使用控件方式驗證“必填和不得小于兩位”
<input type="text" class="required" minlength="2" name="user" id="user" />
注意：默認規則里設置布爾值的，直接寫到 class 里即可實現。如果是數字或數組區間，直接使用屬性=值的方式即可。而對于錯誤提示，可以引入中文漢化文件，或直接替換掉即可。
//使用 JS 對象鍵值對傳參方式設置
?
注意：由于第一種形式不能設置指定的錯誤提示信息。我們推薦使用第二種形式，第二種形式也避免的 HTML 污染。
//所有規則演示
?
?
三．validate()的方法和選項
除了默認的驗證規則外，validate.js 還提供了大量的其他屬性和方法供開發者使用。比如，調試屬性，錯誤提示位置一系列比較有用的選項。
//jQuery.format 格式化錯誤提示
?
//開啟調試模式禁止提交
$('#reg').validate({
debug : true,
});
//設置調試模式為默認，可以禁止多個表單提交
$.validator.setDefaults({
debug : true, ? //仍可以正常驗證，但是為了方便調試不會提交到指定頁面
});
//使用其他方式代替默認提交
submitHandler : function (form) {
//可以執行 ajax 提交，并且無須 debug:true 阻止提交了
},
//忽略某個字段驗證
ignore : '#pass',
//群組錯誤提示
groups : {
myerror : 'user pass',
},
//顯示群組的錯誤提示
focusInvalid : false,
errorPlacement : function (error, element) {
$.each(error, function (index, value) {
$('.myerror').html($('.myerror').html() + $(value).html());
})
},
//群組錯誤提示，分開
groups : {
error_user : 'user',
error_pass : 'pass'
},
//將群組的錯誤指定存放位置（推薦！！）
?
//設置錯誤提示的 class 名
errorClass : 'error_list',
//設置錯誤提示的標簽
errorElement : 'p',
PS：默認的class名稱是“error”，默認的錯誤提示標簽是label。
//統一包裹錯誤提示
(首先將錯誤信息標簽外面再包裹一層li，然后再html文件中提前設置了錯誤信息顯示元素class為error的ol，這兩行代碼就將錯誤信息形成了一個列表樣式)
errorLabelContainer : 'ol.error',
wrapper : 'li',
//設置成功后加載的 class
success : 'success',
PS:驗證成功之后會在label標簽中添加一個sucess類名，然后就可以根據這個設置成功后的的css樣式。另外注意：成功之后，對應的input元素里面的class值會有error變為valid，這樣也可以根據這個class值設置css樣式，樣成功后的提示顯示在input里面，而不是用success顯示在input外面。
?
//使用方法加載 class 并添加文本
success : function (label) {
label.addClass('success').text('ok');
},
//高亮顯示有錯誤的元素，變色式
highlight: function(element, errorClass) {
$(element).fadeOut(function() {
$(element).fadeIn()
})
},
?
1 //高亮顯示有錯誤的元素，變色式 2 highlight: function(element, errorClass) { 3 $(element).css('border', '1px solid red'); 4 }, 5 6 //成功的元素移出錯誤高亮 7 unhighlight : function (element, errorClass) { 8 $(element).css('border', '1px solid #ccc'); 9 },?
//表單提交時獲取信息
invalidHandler : function (event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$('.myerror').html('您有' + errors + '個表單元素填寫非法！');
}
},
?
?
四．validate.js 其他功能
使用 remote:url，可以對表單進行 ajax 驗證，默認會提交當前驗證的值到遠程地址。如果需要提交其他的值，可以使用 data 選項。
//使用 ajax 驗證
?
//user.php 內容
?
注意：遠程地址只能輸出'true'或'false'，不能輸出其他值。
//同時傳遞多個值到遠程端
?
//user.php 內容
?
?
validate.js 提供了一些事件觸發的默認值，這些值呢，大部分建議是不用更改的。
//取消提交驗證
onsubmit : false, //默認是 true
注意： 設置為false 會導致直接傳統提交， 不會實現驗證功能， 一般是用于keyup/click/blur驗證提交。
?
//設置鼠標離開不觸發驗證
onfocusout : false, //默認為 true
//設置鍵盤按下彈起不觸發驗證
onkeyup : false, //默認為 true
注意：只要設置了，在測試的瀏覽器不管是 false 還是 true 都不觸發了。
//設置點擊 checkbox 和 radio 點擊不觸發驗證
onclick : false, //默認為 true
//設置錯誤提示后，無法獲取焦點
focusInvalid : false, //默認為 true
//提示錯誤時，隱藏錯誤提示，不能和 focusInvalid 一起用，沖突
focusCleanup : true, //默認為 false
如果表單元素設置了 title 值，且 messages 為默認，就會讀取 title 值的錯誤信息，我們可以通過 ignoreTitle : true，設置為 true，屏蔽這一個功能。
ignoreTitle : true, //默認為 false
//判斷表單所驗證的元素是否全部有效
alert($('#reg').valid()); //全部有效返回 true
Validate.js 提供了可以單獨驗證每個表單元素的 rules 方法，不但提供了 add 增加驗證，還提供了 remove 刪除驗證的功能。
//給 user 增加一個表單驗證
?
//刪除 user 的所有驗證規則
$('#user').rules('remove');
//刪除 user 的指定驗證規則
$('#user').rules('remove', 'minlength min max');
?
1 //添加自定義驗證 2 $.validator.addMethod('code', function (value, element) { 3 var tel = /^[0-9]{6}$/; 4 return this.optional(element) || (tel.test(value)); 5 }, '請正確填寫您的郵政編碼'); 6 7 //調用自定義驗證 8 rules : { 9 code : { 10 required : true, 11 code : true, 12 } 13 } 14 15?
posted on 2014-08-12 09:23 NET未來之路 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/lonelyxmas/p/3906507.html
總結
以上是生活随笔為你收集整理的jQuery验证插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2544 hdu
- 下一篇： __construct()和__init