對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2010/3/11 8:45:46
jQuery plugin: Validation的詳細使用
最近愛上了jquery，
所以很多的頁面都拿它來使用，
由於它有很多的plus，今天就先來介紹最常用到的jquery.validate.js，
官方的網址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
引用的網址：http://wangwangliujun.spaces.live.com/blog/
說明如下：
官網的例子裡引用了幾個js和css文件，但只需引用jquery.validate.js這一個文件即可.
貼個簡單的例子：
$('#EditView').validate({
event: "keyup",
rules:{
name:{required:true},
cosa_commodity_group_list:{required:true}
},
submitHandler:function(){
$("#group_list > option").attr("selected","selected");
$(this).submit();
}
});1.event是觸發校驗的方式，可選值有keyup(每次按鍵時)，blur(當控件失去焦點時)，不使用這個參數時就只在按提交按鈕時觸發
2.如果在提交前還需要進行一些自定義處理使用submitHandler參數，其它的都比較簡單，自己看看API就成了.
3.debug，如果這個參數為true，那麼表單不會提交，只進行檢查，調試時十分方便.
4.rules，所有的檢驗規則都寫在這個參數里面.
校驗規則參數
格式為： name : {rule1,rule2,...} 經過測試，用input標籤的id是沒有效果的，必須使用input標籤的name
(1) required: true 必輸
(2) number: true 只能輸入數字(包括小數)
(3) digits:true 只能輸入整數
(4) minValue: 3 不能小於3
(5) maxValue: 100 最大不超過100
(6) rangeValue:[50,100] 值範圍為50-100
(7) minLength: 5 最小長度(漢字算一個字符)
(8) maxLength: 10 最大長度(漢字算一個字符)
(9) rangeLength:[5,10] 長度範圍為5至10位(漢字算一個字符)
(10) 上面的minLength, maxLength, rangeLength 這三項除了text input之外還可以用於checkbox,select這兩種控件
(11) email:true 電子郵件
(12) equalTo: "#field" 與#field值相同
(13) dateISO:true 日期型，格式為1998/01/22 1999-12-12
required: true| false |（表達式）|（函數）
還可以是表達式和函數，函數返回true表示required有效，false表示required無效，
返回【""】空對像表示true,返回【" "】和【"wangwang"】等非空的對象為false
5.messages，自定義錯誤信息，格式與rules類似，需要注意的是如果使用此項，那麼所有的校驗項都必需自定義出錯信息，如果只想定義其中的某一些，那麼就把其它的出錯信息定義為空（即""），系統即會使用默認值。
messages {
password: {
required: "請輸入您的密碼.",
minLength: "密碼不能小於５位.",
maxLength: "密碼不能長於32位."
},如何自定義校驗規則：
可以通過自定義檢驗函數的方式新增加校驗規則，步驟如下：
1. 在定義校驗規則之前定義一個新的方法
2. 在rules中指定這個某個域使用此校驗規則
3. 在messages中指定這個域使用此校驗規則沒有通過的提示信息
//這裡定義了一個名為equal的規則
//value是指當前校驗域的值
//element是指當前檢驗的域
//param是指在rules中設定的參數
//這三個參數會在進行校驗時由系統自動帶入
$.validator.methods.equal = function(value, element, param){
//在這裡使用上面的三個參數進行校驗
if(value == param)
return true;//如果當前域的值等於指定的參數就通過校驗};
};
$('#form1').validate({
rules:{
field1:{equal:20}//在這裡指定field1的檢驗規則是equal，並且參數是20
},
messages:{
field1:{equal:'您的计算有误！'}//在這裡定義field1的equal規則校驗出錯後的提示信息
}
});將校驗規則寫到控件中
有時候我們的控件是動態生成的，這個時候就不可能提前先寫好校驗規則，需要在生成控件的同時寫校驗規則.
這樣寫校驗規則有兩種寫法，一是將規則寫到class屬性中，二是將規則寫到單獨的validate屬性中，其中：
寫到class屬性的寫法如下，例子中在規則前添加了名為some, other, styles 的三個class：
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
<textarea id="ccomment" name="comment" class="{required:true}"></textarea>第二種寫法如下，使用自定義的validata屬性，但必需加載jquery.metadata.js這個文件
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />
原文出處：jQuery plugin: Validation的詳細使用-網頁設計的藝術 網動-新浪部落