jQuery Validate 詳細使用說明
所以很多的頁面都拿它來使用,
由於它有很多的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: "密碼不能小於5位.",
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" />