站長資訊網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中的name10 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.
