|
[jQuery]使用jQuery.Validate進(jìn)行客戶端驗證（高級篇-上）——不使用微軟驗證控件的理由
在上一篇使用jQuery.Validate進(jìn)行客戶端驗證（中級篇-下）中我介紹了jQuery.Validate在日常使用的過程中會遇到哪些問題及解決辦法，今天的高級篇則主要是對jQuery.Validate的一些高級應(yīng)用進(jìn)行介紹。
本篇主要介紹為以下2點：
1、擴(kuò)展驗證規(guī)則，jQuery.Validate只提供了一些基本的驗證功能，并不能滿足我們?nèi)粘ｉ_發(fā)的需求，所以我們要為jQuery.Validate擴(kuò)展驗證規(guī)則。
2、分組驗證，在開發(fā)的時候有時會遇到的一個問題就是，不同按鈕引發(fā)不同的驗證。
首先來介紹下第一點：擴(kuò)展驗證規(guī)則，在jQuery.Validate默認(rèn)的驗證規(guī)則無法滿足我們的日常開發(fā)需求的時候，我們需要根據(jù)自己的業(yè)務(wù)需求指定一些相應(yīng)的規(guī)則。（具體見MasterPage.master）
為了擴(kuò)展驗證規(guī)則，我們首先要看下jQuery.Validate為我們提供的擴(kuò)展方法：
addMethod: function(name, method, message) {
$.validator.methods[name] = method;
$.validator.messages[name] = message;
if (method.length < 3) {
$.validator.addClassRules(name, $.validator.normalizeRule(name));
}
}
這段代碼就是用來擴(kuò)展驗證規(guī)則的，意思很簡單，就是向jQuery.Validate添加驗證方法。
接收3個參數(shù)：name-驗證規(guī)則名
method-驗證規(guī)則實現(xiàn)函數(shù)（function）
message-驗證不通過顯示的錯誤消息
當(dāng)我們調(diào)用了這個方法后，我們所寫的規(guī)則自動就會加入到j(luò)Query.Validate規(guī)則中。
好了，我們看下具體如何實現(xiàn)：
手機(jī)號碼驗證：
jQuery.validator.addMethod("telphoneValid", function(value, element) {
var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|1
57|158|159|180|187|188|189)\d{8}$/;
return tel.test(value) || this.optional(element);
}, "請輸入正確的手機(jī)號碼");
這邊的method需要注意的是，這個method實現(xiàn)函數(shù)接收2個元素：
value：檢測的對象的值
element：檢測的對象
這邊我定義了一個名為“telphoneValid”的驗證規(guī)則，在驗證規(guī)則里我首先定義了個手機(jī)驗證的正則表達(dá)式，然后將值放入正則表達(dá)式進(jìn)行驗證，返回驗證結(jié)果，返回的錯誤消息是“請輸入正確的手機(jī)號碼”。
這樣就完成了一個簡單的手機(jī)號碼驗證規(guī)則擴(kuò)展。
其實這邊也可以把擴(kuò)展規(guī)則放到一個當(dāng)單獨的JS中方便以后重用，但因為這邊僅僅是演示，我就把擴(kuò)展方法放到母版頁中了。
注意：我這邊的擴(kuò)展方法是放在jQuery(document).ready()中的，這樣可以保證每次頁面加載完畢后的時候，自定義的驗證規(guī)則可以被加載進(jìn)jQuery.Validate中。
接下來說下第2點：分組驗證，這個分組驗證在默認(rèn)的jQuery.Validate中默認(rèn)是不支持的，也是我覺得很不爽的，因為在實際的開發(fā)過程中經(jīng)常會碰到需要分組驗證的時候。
出處：博客園
責(zé)任編輯：bluehearts
上一頁 下一頁 使用jQuery.Validate進(jìn)行客戶端驗證(后篇) 上 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 使用jQuery.Validate進(jìn)行客戶端驗證(后篇) 上 [1]
第 2 頁 
