jQuery驗證框架 :
基本html代碼：
1 <script src="js/jquery-1.9.1.js"></script> 2 <script src="js/jquery.validate.min.js"></script> 3 <script> 4 $(function () { 5 $('#myForm').validate({ 6 7 rules: { 8 // 用戶名 9 username: { //指的是input中的name 10 required: true, 11 rangelength: [6, 11] 12 }, 13 // 密碼 14 password: { 15 required: true, 16 rangelength: [11, 12] 17 }, 18 }, 19 20 messages: { 21 // 用戶名 22 username: { 23 required: '此項必填', 24 rangelength: '用戶名長度為6-11位' 25 }, 26 // 密碼 27 password: { 28 required: '此項必填', 29 rangelength: '用戶名長度為11-12位' 30 }, 31 }, 32 // 校驗全部通過 33 submitHandler: function () { 34 alert("校驗全部通過！") 35 }, 36 37 }) 38 }) 39 </script> 40 41 42 html: 43 <form action="" id="myForm"> 44 <!--用戶名--> 45 <p> 46 <label for="user">username:</label> 47 <input type="text" name="username" id="user"/> 48 </p> 49 <!--密碼--> 50 <p> 51 <label for="pass">password:</label> 52 <input type="text" name="password" id="pass"/> 53 </p> 54 <!--提交--> 55 <p><input type="submit" value="提交"/></p> 56 </form>
從以上代碼中我來說說jQuery Validation的使用。
1.validate(options)是運行form表單的開始，他是用來驗證你所選的form，以上代碼的第五行“#myForm"是form的id名。
2.rules() 是校驗規則他就是validate里的options,是用戶定義的鍵/值對規則===鍵為一個表單元素的 name屬性、值為一個簡單的字符串或者由規則/參數對組成的一個對象。
3. messages ()是用戶自定義的 鍵/值 對消息===鍵為一個表單元素的name屬性，值為該表單元素將要顯示的消息。
4.rules() 里的username和password是input中的name值。
5.required的值為true時驗證該項是必選項。
6.minlength(length)設置驗證元素的最小長度。
7.maxlength(length)設置驗證元素的最大長度。
8.rangelength(range)設置驗證元素的一個長度范圍。
9.max(value)設置驗證元素的最大值。
10.min(value)設置驗證元素的最小值。
11.range()設置指的范圍。
12.email()驗證電子郵箱格式是否正確。
13.url() 驗證URL格式是否正確。
14.date()驗證日期格式是否正確。【注：不驗證日期的准確性，只驗證格式】
15.submitHandler 當表單通過驗證，提交表單。
// 校驗全部通過 submitHandler: function () { alert("校驗全部通過！") },
16.invalidHandler當未通過驗證的表單提交時，可以在該回調函數中處理一些事情。
// 校驗不通過 invalidHandler: function () { alert("no") },
17.focusInvalid默認值為true，校驗不通過時，焦點跳到第一個無效的表單元素。
18.focusCleanup默認值為true，當表單得到焦點時，移除在該表單上的errorClass並隱藏所有錯誤消息。【注：避免與focusInvalid一起使用。】
19. errorElement 用html元素類型創建錯誤消息的容器。默認寫在label中
20.errorClass設定樣式來定義錯誤信息的樣式。
21.highlight將未通過驗證的表單元素設置高亮。
highlight: function (element, errorClass) {
$(element).addClass(errorClass);
$(element).fadeOut.fadeIn();
}
以上這些是我所接觸的，關於jQuery驗證框架 還有許多。有興趣的可以查查jQuery.validate.js的API.