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.
##
以上是jQuery Validation的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
