jQuery验证插件 Validate详解
Posted 上善若水-随
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery验证插件 Validate详解相关的知识，希望对你有一定的参考价值。
1.引入必要的文件,以及语言中文提示包
2.使用规则如下:
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
| 3 | email:true | 必须输入正确格式的电子邮件。 |
| 4 | url:true | 必须输入正确格式的网址。 |
| 5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| 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 |
3.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <style> 9 em.error { 10 background: red; 11 /*自定义错误提示图 12 background: url(‘../image/error.png‘) no-repeat left center; 13 */ 14 } 15 em.success { 16 background: green; 17 } 18 </style> 19 <script src="/jquery-validation-1.14.0/lib/jquery.js"></script> 20 <script src="/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> 21 <!-- 中文错误提示信息 --> 22 <script src="/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> 23 <body> 24 25 <form class="cmxform" id="commentForm" method="get" action=""> 26 <fieldset> 27 <legend>一个简单的validate验证带验证提示的评论例子</legend> 28 <p> 29 <label for="cusername">姓名</label> 30 <em>*</em><input id="cusername" name="username" size="25" /> 31 </p> 32 <p> 33 <label for="cemail">电子邮件</label> 34 <em>*</em><input id="cemail" name="email" size="25" /> 35 </p> 36 <p> 37 <label for="curl">网址</label> 38 <em> </em><input id="curl" name="url" size="25" /> 39 </p> 40 <p> 41 <label for="comment">你的评论</label> 42 <em>*</em><textarea id="comment" name="comment" cols="22" ></textarea> 43 </p> 44 <p> 45 <label for="cvalcode">验证码</label> 46 <input id="valcode" name="valcode" />7+9=? 47 </p> 48 <p> 49 <input class="submit" type="submit" value="提交"/> 50 </p> 51 52 <script> 53 /*自定义一个验证方法*/ 54 /* 55 formula是需要验证方法的名字 好比如required 必须的。 56 value返回的当前input的value值 57 param返回的是当前自定义的验证格式 好比如：7+9 58 在试用了eval方法 让字符串相加 59 */ 60 $.validator.addMethod("formula",function(value,element,param){ 61 return value==eval(param) 62 },"请正确输入验证信息"); 63 64 $("#commentForm").validate({ 65 rules:{ 66 username:{ 67 required:true, 68 minlength:2 69 }, 70 email:{ 71 required:true, 72 email:true 73 }, 74 url:"url", 75 comment:"required", 76 valcode: { 77 formula: "7+9" 78 } 79 }, 80 /* 自定义错误消息*/ 81 messages:{ 82 username:{ 83 required:"报告,必须输入点东西", 84 minlength:"长度不够" 85 } 86 }, 87 /*自定义错误提示样式*/ 88 errorElement:"em", 89 success:function(label){ 90 label.text("成功 ").addClass(‘success‘) 91 } 92 }); 93 </script> 94 95 </form> 96 </body> 97 </html>
4.使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。
remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}
注意:远程地址只能输出 "true" 或 "false"，不能有其他输出。
以上是关于jQuery验证插件 Validate详解的主要内容，如果未能解决你的问题，请参考以下文章