首页 > 代码库 > jquery-validation 使用

jquery-validation 使用

2024-07-03 09:38:02   232人阅读

 

  1. jquery-validation 使用  
  2.   
  3. 一、用前必备  
  4. 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/  
  5. API: http://jquery.bassistance.de/api-browser/plugins.html  
  6. 当前版本：1.5.5  
  7. 需要JQuery版本：1.2.6+, 兼容 1.3.2  
  8. <script src="../js/jquery.js" type="text/javascript"></script>  
  9. <script src="../js/jquery.validate.js" type="text/javascript"></script>  
  10.   
  11. 二、默认校验规则  
  12. (1)required:true               必输字段  
  13. (2)remote:"check.php"          使用ajax方法调用check.php验证输入值  
  14. (3)email:true                  必须输入正确格式的电子邮件  
  15. (4)url:true                    必须输入正确格式的网址  
  16. (5)date:true                   必须输入正确格式的日期  
  17. (6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性  
  18. (7)number:true                 必须输入合法的数字(负数，小数)  
  19. (8)digits:true                 必须输入整数  
  20. (9)creditcard:                 必须输入合法的信用卡号  
  21. (10)equalTo:"#field"           输入值必须和#field相同  
  22. (11)accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）  
  23. (12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)  
  24. (13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)  
  25. (14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)  
  26. (15)range:[5,10]               输入值必须介于 5 和 10 之间  
  27. (16)max:5                      输入值不能大于5  
  28. (17)min:10                     输入值不能小于10  
  29.   
  30. 三、默认的提示  
  31. messages: {  
  32.     required: "This field is required.",  
  33.     remote: "Please fix this field.",  
  34.     email: "Please enter a valid email address.",  
  35.     url: "Please enter a valid URL.",  
  36.     date: "Please enter a valid date.",  
  37.     dateISO: "Please enter a valid date (ISO).",  
  38.     dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",  
  39.     number: "Please enter a valid number.",  
  40.     numberDE: "Bitte geben Sie eine Nummer ein.",  
  41.     digits: "Please enter only digits",  
  42.     creditcard: "Please enter a valid credit card number.",  
  43.     equalTo: "Please enter the same value again.",  
  44.     accept: "Please enter a value with a valid extension.",  
  45.     maxlength: $.validator.format("Please enter no more than {0} characters."),  
  46.     minlength: $.validator.format("Please enter at least {0} characters."),  
  47.     rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),  
  48.     range: $.validator.format("Please enter a value between {0} and {1}."),  
  49.     max: $.validator.format("Please enter a value less than or equal to {0}."),  
  50.     min: $.validator.format("Please enter a value greater than or equal to {0}.")  
  51. },  
  52. 如需要修改，可在js代码中加入：  
  53. jQuery.extend(jQuery.validator.messages, {  
  54.         required: "必选字段",  
  55. remote: "请修正该字段",  
  56. email: "请输入正确格式的电子邮件",  
  57. url: "请输入合法的网址",  
  58. date: "请输入合法的日期",  
  59. dateISO: "请输入合法的日期 (ISO).",  
  60. number: "请输入合法的数字",  
  61. digits: "只能输入整数",  
  62. creditcard: "请输入合法的信用卡号",  
  63. equalTo: "请再次输入相同的值",  
  64. accept: "请输入拥有合法后缀名的字符串",  
  65. maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),  
  66. minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),  
  67. rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),  
  68. range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),  
  69. max: jQuery.validator.format("请输入一个最大为 {0} 的值"),  
  70. min: jQuery.validator.format("请输入一个最小为 {0} 的值")  
  71. });  
  72. 推荐做法，将此文件放入messages_cn.js中，在页面中引入  
  73. <script src="../js/messages_cn.js" type="text/javascript"></script>  
  74.   
  75. 四、使用方式  
  76. 1.将校验规则写到控件中  
  77. <script src="../js/jquery.js" type="text/javascript"></script>  
  78. <script src="../js/jquery.validate.js" type="text/javascript"></script>  
  79. <script src="./js/jquery.metadata.js" type="text/javascript"></script>  
  80. $().ready(function() {  
  81. $("#signupForm").validate();  
  82. });  
  83.   
  84. <form id="signupForm" method="get" action="">  
  85.     <p>  
  86.         <label for="firstname">Firstname</label>  
  87.         <input id="firstname" name="firstname" class="required" />  
  88.     </p>  
  89. <p>  
  90. <label for="email">E-Mail</label>  
  91. <input id="email" name="email" class="required email" />  
  92. </p>  
  93. <p>  
  94. <label for="password">Password</label>  
  95. <input id="password" name="password" type="password" class="{required:true,minlength:5}" />  
  96. </p>  
  97. <p>  
  98. <label for="confirm_password">确认密码</label>  
  99. <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:‘#password‘}" />  
  100. </p>  
  101.     <p>  
  102.         <input class="submit" type="submit" value="Submit"/>  
  103.     </p>  
  104. </form>  
  105. 使用class="{}"的方式，必须引入包：jquery.metadata.js  
  106. 可以使用如下的方法，修改提示内容：  
  107. class="{required:true,minlength:5,messages:{required:‘请输入内容‘}}"  
  108. 在使用equalTo关键字时，后面的内容必须加上引号，如下代码：  
  109. class="{required:true,minlength:5,equalTo:‘#password‘}"  
  110. 另外一个方式，使用关键字：meta（为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项）  
  111. Tell the validation plugin to look inside a validate-property in metadata for validation rules.  
  112. 例如：  
  113. meta: "validate"  
  114. <input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />  
  115.   
  116. 再有一种方式：  
  117. $.metadata.setType("attr", "validate");  
  118. 这样可以使用validate="{required:true}"的方式，或者class="required"，但class="{required:true,minlength:5}"将不起作用  
  119.   
  120. 2.将校验规则写到代码中  
  121.   
  122. $().ready(function() {  
  123. $("#signupForm").validate({  
  124.         rules: {  
  125.    firstname: "required",  
  126.    email: {  
  127.     required: true,  
  128.     email: true  
  129.    },  
  130.    password: {  
  131.     required: true,  
  132.     minlength: 5  
  133.    },  
  134.    confirm_password: {  
  135.     required: true,  
  136.     minlength: 5,  
  137.     equalTo: "#password"  
  138.    }  
  139. },  
  140.         messages: {  
  141.    firstname: "请输入姓名",  
  142.    email: {  
  143.     required: "请输入Email地址",  
  144.     email: "请输入正确的email地址"  
  145.    },  
  146.    password: {  
  147.     required: "请输入密码",  
  148.     minlength: jQuery.format("密码不能小于{0}个字符")  
  149.    },  
  150.    confirm_password: {  
  151.     required: "请输入确认密码",  
  152.     minlength: "确认密码不能小于5个字符",  
  153.     equalTo: "两次输入密码不一致不一致"  
  154.    }  
  155. }  
  156.     });  
  157. });  
  158. //messages处，如果某个控件没有message，将调用默认的信息  
  159.   
  160. <form id="signupForm" method="get" action="">  
  161.     <p>  
  162.         <label for="firstname">Firstname</label>  
  163.         <input id="firstname" name="firstname" />  
  164.     </p>  
  165. <p>  
  166. <label for="email">E-Mail</label>  
  167. <input id="email" name="email" />  
  168. </p>  
  169. <p>  
  170. <label for="password">Password</label>  
  171. <input id="password" name="password" type="password" />  
  172. </p>  
  173. <p>  
  174. <label for="confirm_password">确认密码</label>  
  175. <input id="confirm_password" name="confirm_password" type="password" />  
  176. </p>  
  177.     <p>  
  178.         <input class="submit" type="submit" value="Submit"/>  
  179.     </p>  
  180. </form>  
  181. required:true 必须有值  
  182. required:"#aa:checked"表达式的值为真，则需要验证  
  183. required:function(){}返回为真，表时需要验证  
  184. 后边两种常用于，表单中需要同时填或不填的元素  
  185.   
  186. 五、常用方法及注意问题  
  187. 1.用其他方式替代默认的SUBMIT  
  188. $().ready(function() {  
  189. $("#signupForm").validate({  
  190.         submitHandler:function(form){  
  191.             alert("submitted");     
  192.             form.submit();  
  193.         }      
  194.     });  
  195. });  
  196. 可以设置validate的默认值，写法如下：  
  197. $.validator.setDefaults({  
  198. submitHandler: function(form) { alert("submitted!");form.submit(); }  
  199. });  
  200. 如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()  
  201.   
  202. 2.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便  
  203. $().ready(function() {  
  204. $("#signupForm").validate({  
  205.         debug:true  
  206.     });  
  207. });  
  208. 如果一个页面中有多个表单，用  
  209. $.validator.setDefaults({  
  210.    debug: true  
  211. })  
  212.   
  213. 3.ignore：忽略某些元素不验证  
  214. ignore: ".ignore"  
  215.   
  216. 4.errorPlacement：Callback Default: 把错误信息放在验证的元素后面  
  217. 指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面  
  218. errorPlacement: function(error, element) {    
  219.     error.appendTo(element.parent());    
  220. }  
  221. //示例：  
  222. <tr>  
  223.     <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>  
  224.     <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>  
  225.     <td class="status"></td>  
  226. </tr>  
  227. <tr>  
  228.     <td style="padding-right: 5px;">  
  229.         <input id="dateformat_eu" name="dateformat" type="radio" value="0" />  
  230.         <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>  
  231.     </td>  
  232.     <td style="padding-left: 5px;">  
  233.         <input id="dateformat_am" name="dateformat" type="radio" value="1" />  
  234.         <label id="ldateformat_am" for="dateformat_am">02/14/07</label>  
  235.     </td>  
  236.     <td></td>  
  237. </tr>  
  238. <tr>  
  239.     <td class="label"> </td>  
  240.     <td class="field" colspan="2">  
  241.         <div id="termswrap">  
  242.             <input id="terms" type="checkbox" name="terms" />  
  243.             <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>  
  244.         </div>  
  245.     </td>  
  246. </tr>  
  247. errorPlacement: function(error, element) {  
  248.     if ( element.is(":radio") )  
  249.         error.appendTo( element.parent().next().next() );  
  250.     else if ( element.is(":checkbox") )  
  251.         error.appendTo ( element.next() );  
  252.     else  
  253.         error.appendTo( element.parent().next() );  
  254. }  
  255. 代码的作用是：一般情况下把错误信息显示在<td class="status"></td>中，如果是radio显示在<td></td>中，如果是checkbox显示在内容的后面  
  256. errorClass：String Default: "error"  
  257. 指定错误提示的css类名，可以自定义错误提示的样式  
  258. errorElement：String Default: "label"  
  259. 用什么标签标记错误，默认的是label你可以改成em  
  260. errorContainer：Selector  
  261. 显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大  
  262. errorContainer: "#messageBox1, #messageBox2"  
  263. errorLabelContainer：Selector  
  264. 把错误信息统一放在一个容器里面。  
  265. wrapper：String  
  266. 用什么标签再把上边的errorELement包起来  
  267. 一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏  
  268. errorContainer: "div.error",  
  269. errorLabelContainer: $("#signupForm div.error"),  
  270. wrapper: "li"  
  271.   
  272. 设置错误提示的样式，可以增加图标显示  
  273. input.error { border: 1px solid red; }  
  274. label.error {  
  275. background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;  
  276. padding-left: 16px;  
  277. padding-bottom: 2px;  
  278. font-weight: bold;  
  279. color: #EA5200;  
  280. }  
  281. label.checked {  
  282. background:url("./demo/images/checked.gif") no-repeat 0px 0px;  
  283. }  
  284. success：String,Callback  
  285. 要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数  
  286. success: function(label) {  
  287.     // set   as text for IE  
  288.     label.html(" ").addClass("checked");  
  289.     //label.addClass("valid").text("Ok!")  
  290. }  
  291. 添加"valid" 到验证元素, 在CSS中定义的样式<style>label.valid {}</style>  
  292. success: "valid"  
  293.   
  294.   
  295. nsubmit： Boolean Default: true  
  296. 提交时验证. 设置唯false就用其他方法去验证  
  297. onfocusout：Boolean Default: true  
  298. 失去焦点是验证(不包括checkboxes/radio buttons)  
  299. onkeyup：Boolean Default: true  
  300. 在keyup时验证.  
  301. onclick：Boolean Default: true  
  302. 在checkboxes 和 radio 点击时验证  
  303. focusInvalid：Boolean Default: true  
  304. 提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点  
  305. focusCleanup：Boolean Default: false  
  306. 如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用  
  307.   
  308. // 重置表单  
  309. $().ready(function() {  
  310. var validator = $("#signupForm").validate({  
  311.         submitHandler:function(form){  
  312.             alert("submitted");     
  313.             form.submit();  
  314.         }      
  315.     });  
  316.     $("#reset").click(function() {  
  317.         validator.resetForm();  
  318.     });  
  319. });  
  320.   
  321. remote：URL  
  322. 使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项  
  323. remote: "check-email.php"  
  324. remote: {  
  325.     url: "check-email.php",     //后台处理程序  
  326.     type: "post",               //数据发送方式  
  327.     dataType: "json",           //接受数据格式     
  328.     data: {                     //要传递的数据  
  329.         username: function() {  
  330.             return $("#username").val();  
  331.         }  
  332.     }  
  333. }  
  334.   
  335. 远程地址只能输出 "true" 或 "false"，不能有其它输出  
  336.   
  337.   
  338. addMethod：name, method, message  
  339. 自定义验证方法  
  340.   
  341. // 中文字两个字节  
  342. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {  
  343.     var length = value.length;  
  344.     for(var i = 0; i < value.length; i++){  
  345.         if(value.charCodeAt(i) > 127){  
  346.             length++;  
  347.         }  
  348.     }  
  349. return this.optional(element) || ( length >= param[0] && length <= param[1] );     
  350. }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));  
  351.   
  352. // 邮政编码验证     
  353. jQuery.validator.addMethod("isZipCode", function(value, element) {     
  354.     var tel = /^[0-9]{6}$/;  
  355.     return this.optional(element) || (tel.test(value));  
  356. }, "请正确填写您的邮政编码");  
  357.   
  358. radio和checkbox、select的验证  
  359. radio的required表示必须选中一个  
  360. <input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />  
  361. <input type="radio" id="gender_female" value="f" name="gender"/>  
  362. checkbox的required表示必须选中  
  363. <input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />  
  364. checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  
  365. <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />  
  366. <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />  
  367. <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />  
  368.   
  369. select的required表示选中的value不能为空  
  370. <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">  
  371.     <option value=""></option>  
  372.     <option value="1">Buga</option>  
  373.     <option value="2">Baga</option>  
  374.     <option value="3">Oi</option>  
  375. </select>  
  376. select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  
  377. <select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">  
  378.     <option value="b">Banana</option>  
  379.     <option value="a">Apple</option>  
  380.     <option value="p">Peach</option>  
  381.     <option value="t">Turtle</option>  
  382. </select>  
  383. 转载自原文地址:http://www.cnblogs.com/lichengjava/archive/2011/05/03/validation.html


联系
我们