js插件 vaidate 驗證用戶登陸信息

下面是默認校驗規則，也能夠自定義規則

---

(1)required:true 必輸字段

---

(2)remote:"check.php" 使用ajax方法調用check.php驗證輸入值

---

(3)email:true 必須輸入正確格式的電子郵件

---

(4)url:true 必須輸入正確格式的網址

---

(5)date:true 必須輸入正確格式的日期

---

(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性

---

(7)number:true 必須輸入合法的數字(負數，小數)

---

(8)digits:true 必須輸入整數

---

(9)creditcard: 必須輸入合法的信用卡號

---

(10)equalTo:"#field" 輸入值必須和#field相同

---

(11)accept: 輸入擁有合法後綴名的字符串（上傳文件的後綴）

---

(12)maxlength:5 輸入長度最可能是5的字符串(漢字算一個字符)

---

(13)minlength:10 輸入長度最小是10的字符串(漢字算一個字符)

---

(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)

---

(15)range:[5,10] 輸入值必須介於 5 和 10 之間

---

(16)max:5 輸入值不能大於5

---

(17)min:10 輸入值不能小於10

---

下面是默認的驗證提示，官網有簡體中文版的驗證提示下載，或者經過jQuery.extend(jQuery.validator.messages自定義錯誤提示信息，能夠將網站的驗證提示文本統一到一個文件裏。

---

required: "This field is required.",

---

remote: "Please fix this field.",

---

email: "Please enter a valid email address.",

---

url: "Please enter a valid URL.",

---

date: "Please enter a valid date.",

---

dateISO: "Please enter a valid date (ISO).",

---

number: "Please enter a valid number.",

---

digits: "Please enter only digits",

---

creditcard: "Please enter a valid credit card number.",

---

equalTo: "Please enter the same value again.",

---

accept: "Please enter a value with a valid extension.",

---

maxlength: $.validator.format("Please enter no more than {0} characters."),

---

minlength: $.validator.format("Please enter at least {0} characters."),

---

rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),

---

range: $.validator.format("Please enter a value between {0} and {1}."),

---

max: $.validator.format("Please enter a value less than or equal to {0}."),

---

min: $.validator.format("Please enter a value greater than or equal to {0}.")

---

使用方式

1： 在控件中使用默認驗證規則，例子： 電子郵件(必填)

<input id="email" class="required email" value="email@" />

2： 能夠在控件中自定義驗證規則，例子： 自定義(必填,[3,5]) <input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5, messages:{required:'爲何不輸入一點文字呢',minlength:'輸入的太少了',maxlength:'輸入那麼多幹嗎'}}" />

3:

經過javascript自定義驗證規則，下面的JS自定義了兩個規則，password和confirm_password

<!-- lang: python -->

$().ready(function() { $("#form2").validate({ rules: { password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { password: { required: "沒有填寫密碼", minlength: jQuery.format("密碼不能小於{0}個字符") }, confirm_password: { required: "沒有確認密碼", minlength: "確認密碼不能小於{0}個字符", equalTo: "兩次輸入密碼不一致嘛" } } }); });

required除了設置爲true/false以外，還能夠使用表達式或者函數，好比

<!-- lang: python -->

$("#form2").validate({ rules: { funcvalidate: { required: function() {return $("#password").val()!=""; } } }, messages: { funcvalidate: { required: "有密碼的狀況下必填" } } });

Html 密碼<input id="password" name="password" type="password" /> 確認密碼<input id="confirm_password" name="confirm_password" type="password" /> 條件驗證<input id="funcvalidate" name="funcvalidate" value="" />

4：

使用meta自定義驗證信息

首先用JS設置meta $("#form3").validate({ meta: "validate" });

Html

email<input class="{validate:{required:true, email:true, messages:{required:'輸入email地址', email:'你輸入的不是有效的郵件地址'}}}"/>

5:

使用meta能夠將驗證規則寫在自定義的標籤內，好比validate

JS設置meta $().ready(function() { $.metadata.setType("attr", "validate"); $("#form1").validate(); });

Html

Email <input id="email" name="email" validate="{required:true, email:true, messages:{required:'輸入email地址', email:'你輸入的不是有效的郵件地址'}}" />

6: 自定義驗證規則

對於複雜的驗證，能夠經過jQuery.validator.addMethod添加自定義的驗證規則

官網提供的additional-methods.js裏包含一些經常使用的驗證方式，好比lettersonly，ziprange，nowhitespace等

例子 // 字符驗證
jQuery.validator.addMethod("userName", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "用戶名只能包括中文字、英文字母、數字和下劃線");

//而後就能夠使用這個規則了

<!-- lang: python -->
$("#form1").validate({
// 驗證規則
rules: {
    userName: {
        required: true,
        userName: true,
        rangelength: [5,10]
    }
},
/* 設置錯誤信息 */
messages: {
    userName: {
        required: "請填寫用戶名",
        rangelength: "用戶名必須在5-10個字符之間" 
    }                
},

});

7: radio、checkbox、select的驗證方式相似

radio的驗證

性別 <span> 男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br /> 女<input type="radio" id="gender_female" value="f" name="gender" /> </span>

checkbox的驗證

最少選擇兩項 <span> 選項1<input type="checkbox" id="check_1" value="1" name="checkGroup" class="{required:true,minlength:2, messages:{required:'必須選擇',minlength:'至少選擇2項'}}" /><br /> 選項2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br /> 選項3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br /> </span>

select的驗證

下拉框 <span> <select id="selectbox" name="selectbox" class="{required:true}"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </span> 8:

Ajax驗證

用remote能夠進行Ajax驗證 remote: { url: "url", //url地址 type: "post", //發送方式 dataType: "json", //數據格式 data: { //要傳遞的數據 username: function() { return $("#username").val(); }} }

補充: jQuery Validation插件remote驗證方式的Bug http://www.cnblogs.com/JeffreyZhao/archive/2009/12/04/jquery-validate-remote-bug.html

下一章是API的具體說明 而後整理怎麼進一步自定義jQuery.validate以及網上一些經常使用的驗證代碼