当前位置： 代码迷 >> Web前端 >> jQuery.Validate证验库
  详细解决方案

jQuery.Validate证验库

热度：434   发布时间：2013-02-24 17:58:57.0
jQuery.Validate验证库

一、用前必备
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/?
API:?http://jquery.bassistance.de/api-browser/plugins.html?
当前版本：1.5.5
需要JQuery版本：1.2.6+, 兼容 1.3.2
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

二、默认校验规则
(1)required:true?????????????? 必输字段
(2)remote:"check.php"????????? 使用ajax方法调用check.php验证输入值
(3)email:true????????????????? 必须输入正确格式的电子邮件
(4)url:true??????????????????? 必须输入正确格式的网址
(5)date:true?????????????????? 必须输入正确格式的日期
(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

三、默认的提示

Js代码?
  1. messages:?{??
  2. ????required:?"This?field?is?required.",??
  3. ????remote:?"Please?fix?this?field.",??
  4. ????email:?"Please?enter?a?valid?email?address.",??
  5. ????url:?"Please?enter?a?valid?URL.",??
  6. ????date:?"Please?enter?a?valid?date.",??
  7. ????dateISO:?"Please?enter?a?valid?date?(ISO).",??
  8. ????dateDE:?"Bitte?geben?Sie?ein?g眉ltiges?Datum?ein.",??
  9. ????number:?"Please?enter?a?valid?number.",??
  10. ????numberDE:?"Bitte?geben?Sie?eine?Nummer?ein.",??
  11. ????digits:?"Please?enter?only?digits",??
  12. ????creditcard:?"Please?enter?a?valid?credit?card?number.",??
  13. ????equalTo:?"Please?enter?the?same?value?again.",??
  14. ????accept:?"Please?enter?a?value?with?a?valid?extension.",??
  15. ????maxlength:?$.validator.format("Please?enter?no?more?than?{0}?characters."),??
  16. ????minlength:?$.validator.format("Please?enter?at?least?{0}?characters."),??
  17. ????rangelength:?$.validator.format("Please?enter?a?value?between?{0}?and?{1}?characters?long."),??
  18. ????range:?$.validator.format("Please?enter?a?value?between?{0}?and?{1}."),??
  19. ????max:?$.validator.format("Please?enter?a?value?less?than?or?equal?to?{0}."),??
  20. ????min:?$.validator.format("Please?enter?a?value?greater?than?or?equal?to?{0}.")??
  21. },??

?


如需要修改，可在js代码中加入：

Js代码 ?
  1. jQuery.extend(jQuery.validator.messages,?{??
  2. ????????required:?"必选字段",??
  3. ??remote:?"请修正该字段",??
  4. ??email:?"请输入正确格式的电子邮件",??
  5. ??url:?"请输入合法的网址",??
  6. ??date:?"请输入合法的日期",??
  7. ??dateISO:?"请输入合法的日期?(ISO).",??
  8. ??number:?"请输入合法的数字",??
  9. ??digits:?"只能输入整数",??
  10. ??creditcard:?"请输入合法的信用卡号",??
  11. ??equalTo:?"请再次输入相同的值",??
  12. ??accept:?"请输入拥有合法后缀名的字符串",??
  13. ??maxlength:?jQuery.validator.format("请输入一个长度最多是?{0}?的字符串"),??
  14. ??minlength:?jQuery.validator.format("请输入一个长度最少是?{0}?的字符串"),??
  15. ??rangelength:?jQuery.validator.format("请输入一个长度介于?{0}?和?{1}?之间的字符串"),??
  16. ??range:?jQuery.validator.format("请输入一个介于?{0}?和?{1}?之间的值"),??
  17. ??max:?jQuery.validator.format("请输入一个最大为?{0}?的值"),??
  18. ??min:?jQuery.validator.format("请输入一个最小为?{0}?的值")??
  19. });??

?


推荐做法，将此文件放入messages_cn.js中，在页面中引入

Js代码?
  1. <script?src="../js/messages_cn.js"?type="text/javascript"></script>??

?

四、使用方式
1.将校验规则写到控件中

Js代码?
  1. <script?src="../js/jquery.js"?type="text/javascript"></script>??
  2. <script?src="../js/jquery.validate.js"?type="text/javascript"></script>??
  3. <script?src="./js/jquery.metadata.js"?type="text/javascript"></script>??
  4. $().ready(function()?{??
  5. ?$("#signupForm").validate();??
  6. });??
  7. ??
  8. <form?id="signupForm"?method="get"?action="">??
  9. ????<p>??
  10. ????????<label?for="firstname">Firstname</label>??
  11. ????????<input?id="firstname"?name="firstname"?class="required"?/>??
  12. ????</p>??
  13. ?<p>??
  14. ??<label?for="email">E-Mail</label>??
  15. ??<input?id="email"?name="email"?class="required?email"?/>??
  16. ?</p>??
  17. ?<p>??
  18. ??<label?for="password">Password</label>??
  19. ??<input?id="password"?name="password"?type="password"?class="{required:true,minlength:5}"?/>??
  20. ?</p>??
  21. ?<p>??
  22. ??<label?for="confirm_password">确认密码</label>??
  23. ??<input?id="confirm_password"?name="confirm_password"?type="password"?class="{required:true,minlength:5,equalTo:'#password'}"?/>??
  24. ?</p>??
  25. ????<p>??
  26. ????????<input?class="submit"?type="submit"?value="Submit"/>??
  27. ????</p>??
  28. </form>??

使用class="{}"的方式，必须引入包：jquery.metadata.js

可以使用如下的方法，修改提示内容：

Js代码??
  1. class="{required:true,minlength:5,messages:{required:'请输入内容'}}"??

在使用equalTo关键字时，后面的内容必须加上引号，如下代码：

Js代码? ?
  1. class="{required:true,minlength:5,equalTo:'#password'}"??

另外一个方式，使用关键字：meta（为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项）

Tell the validation plugin to look inside a validate-property in metadata for validation rules.
例如：

Js代码??
  1. meta:?"validate"??
  2. <input?id="password"?name="password"?type="password"?class="{validate:{required:true,minlength:5}}"?/>??

?再有一种方式：

Js代码??
  1. $.metadata.setType("attr",?"validate");??

这样可以使用validate="{required:true}"的方式，或者class="required"，但class="{required:true,minlength:5}"将不起作用?

2.将校验规则写到代码中

?

Html代码??
  1. $().ready(function()?{??
  2. ?$("#signupForm").validate({??
  3. ????????rules:?{??
  4. ???firstname:?"required",??
  5. ???email:?{??
  6. ????required:?true,??
  7. ????email:?true??
  8. ???},??
  9. ???password:?{??
  10. ????required:?true,??
  11. ????minlength:?5??
  12. ???},??
  13. ???confirm_password:?{??
  14. ????required:?true,??
  15. ????minlength:?5,??
  16. ????equalTo:?"#password"??
  17. ???}??
  18. ??},??
  19. ????????messages:?{??
  20. ???firstname:?"请输入姓名",??
  21. ???email:?{??
  22. ????required:?"请输入Email地址",??
  23. ????email:?"请输入正确的email地址"??
  24. ???},??
  25. ???password:?{??
  26. ????required:?"请输入密码",??
  27. ????minlength:?jQuery.format("密码不能小于{0}个字符")??
  28. ???},??
  29. ???confirm_password:?{??
  30. ????required:?"请输入确认密码",??
  31. ????minlength:?"确认密码不能小于5个字符",??
  32. ????equalTo:?"两次输入密码不一致不一致"??
  33. ???}??
  34. ??}??
  35. ????});??
  36. });??
  37. //messages处，如果某个控件没有message，将调用默认的信息??
  38. ??
  39. <form?id="signupForm"?method="get"?action="">??
  40. ????<p>??
  41. ????????<label?for="firstname">Firstname</label>??
  42. ????????<input?id="firstname"?name="firstname"?/>??
  43. ????</p>??
  44. ?<p>??
  45. ??<label?for="email">E-Mail</label>??
  46. ??<input?id="email"?name="email"?/>??
  47. ?</p>??
  48. ?<p>??
  49. ??<label?for="password">Password</label>??
  50. ??<input?id="password"?name="password"?type="password"?/>??
  51. ?</p>??
  52. ?<p>??
  53. ??<label?for="confirm_password">确认密码</label>??
  54. ??<input?id="confirm_password"?name="confirm_password"?type="password"?/>??
  55. ?</p>??
  56. ????<p>??
  57. ????????<input?class="submit"?type="submit"?value="Submit"/>??
  58. ????</p>??
  59. </form>??

?

required:true 必须有值
required:"#aa:checked"表达式的值为真，则需要验证
required:function(){}返回为真，表时需要验证
后边两种常用于，表单中需要同时填或不填的元素
?
五、常用方法及注意问题
1.用其他方式替代默认的SUBMIT

Js代码??
  1. $().ready(function()?{??
  2. ?$("#signupForm").validate({??
  3. ????????submitHandler:function(form){??
  4. ????????????alert("submitted");?????
  5. ????????????form.submit();??
  6. ????????}??????
  7. ????});??
  8. });??

?


可以设置validate的默认值，写法如下：

Js代码??
  1. $.validator.setDefaults({??
  2. ?submitHandler:?function(form)?{?alert("submitted!");form.submit();?}??
  3. });??

?


如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()

2.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便

Js代码??
  1. $().ready(function()?{??
  2. ?$("#signupForm").validate({??
  3. ????????debug:true??
  4. ????});??
  5. });??

?


如果一个页面中有多个表单，用

Js代码??
  1. $.validator.setDefaults({??
  2. ???debug:?true??
  3. })??

?

3.ignore：忽略某些元素不验证

Js代码??
  1. ignore:?".ignore"??

?

4.errorPlacement：Callback? Default: 把错误信息放在验证的元素后面??
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面?
errorPlacement: function(error, element) {???
??? error.appendTo(element.parent());???
}
//示例：

Html代码 ?
  1. <tr>??
  2. ????<td?class="label"><label?id="lfirstname"?for="firstname">First?Name</label></td>??
  3. ????<td?class="field"><input?id="firstname"?name="firstname"?type="text"?value=""?maxlength="100"?/></td>??
  4. ????<td?class="status"></td>??
  5. </tr>??
  6. <tr>??
  7. ????<td?style="padding-right:?5px;">??
  8. ????????<input?id="dateformat_eu"?name="dateformat"?type="radio"?value="0"?/>??
  9. ????????<label?id="ldateformat_eu"?for="dateformat_eu">14/02/07</label>??
  10. ????</td>??
  11. ????<td?style="padding-left:?5px;">??
  12. ????????<input?id="dateformat_am"?name="dateformat"?type="radio"?value="1"??/>??
  13. ????????<label?id="ldateformat_am"?for="dateformat_am">02/14/07</label>??
  14. ????</td>??
  15. ????<td></td>??
  16. </tr>??
  17. <tr>??
  18. ????<td?class="label">&nbsp;</td>??
  19. ????<td?class="field"?colspan="2">??
  20. ????????<div?id="termswrap">??
  21. ????????????<input?id="terms"?type="checkbox"?name="terms"?/>??
  22. ????????????<label?id="lterms"?for="terms">I?have?read?and?accept?the?Terms?of?Use.</label>??
  23. ????????</div>??
  24. ????</td>??
  25. </tr>??
Js代码??
  1. errorPlacement:?function(error,?element)?{??
  2. ????if?(?element.is(":radio")?)??
  3. ????????error.appendTo(?element.parent().next().next()?);??
  4. ????else?if?(?element.is(":checkbox")?)??
  5. ????????error.appendTo?(?element.next()?);??
  6. ????else??
  7. ????????error.appendTo(?element.parent().next()?);??
  8. }??
?
代码的作用是：一般情况下把错误信息显示在<td class="status"></td>中，如果是radio显示在<td></td>中，如果是checkbox显示在内容的后面

errorClass：String? Default: "error"??
指定错误提示的css类名，可以自定义错误提示的样式
errorElement：String? Default: "label"??
用什么标签标记错误，默认的是label你可以改成em
errorContainer：Selector??
显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer：Selector?
把错误信息统一放在一个容器里面。
wrapper：String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏

Js代码??
  1. errorContainer:?"div.error",??
  2. errorLabelContainer:?$("#signupForm?div.error"),??
  3. wrapper:?"li"??

?


?
设置错误提示的样式，可以增加图标显示

Js代码??
  1. input.error?{?border:?1px?solid?red;?}??
  2. label.error?{??
  3. ??background:url("./demo/images/unchecked.gif")?no-repeat?0px?0px;??
  4. ??padding-left:?16px;??
  5. ??padding-bottom:?2px;??
  6. ??font-weight:?bold;??
  7. ??color:?#EA5200;??
  8. }??
  9. label.checked?{??
  10. ??background:url("./demo/images/checked.gif")?no-repeat?0px?0px;??
  11. }??
  12. success：String,Callback???

?


要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数

Js代码?
  1. success:?function(label)?{??
  2. ????//?set?&nbsp;?as?text?for?IE??
  3. ????label.html("&nbsp;").addClass("checked");??
  4. ????//label.addClass("valid").text("Ok!")??
  5. }??

?


添加"valid" 到验证元素, 在CSS中定义的样式<style>label.valid {}</style>
success: "valid"

nsubmit： Boolean? Default: true??
提交时验证. 设置唯false就用其他方法去验证
onfocusout：Boolean? Default: true??
失去焦点是验证(不包括checkboxes/radio buttons)?
onkeyup：Boolean? Default: true??
在keyup时验证.
onclick：Boolean? Default: true??
在checkboxes 和 radio 点击时验证
focusInvalid：Boolean? Default: true??
提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup：Boolean? Default: false??
如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用
?
// 重置表单

Java代码??
  1. $().ready(function()?{??
  2. ?var?validator?=?$("#signupForm").validate({??
  3. ????????submitHandler:function(form){??
  4. ????????????alert("submitted");?????
  5. ????????????form.submit();??
  6. ????????}??????
  7. ????});??
  8. ????$("#reset").click(function()?{??
  9. ????????validator.resetForm();??
  10. ????});??
  11. });??

?remote：URL

使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项

Js代码??
  1. remote:?"check-email.php"??
  2. remote:?{??
  3. ????url:?"check-email.php",?????//后台处理程序??
  4. ????type:?"post",???????????????//数据发送方式??
  5. ????dataType:?"json",???????????//接受数据格式?????
  6. ????data:?{?????????????????????//要传递的数据??
  7. ????????username:?function()?{??
  8. ????????????return?$("#username").val();??
  9. ????????}??
  10. ????}??
  11. }??

?

远程地址只能输出 "true" 或 "false"，不能有其它输出
?
?
addMethod：name, method, message
自定义验证方法

?

Js代码?
  1. //?中文字两个字节??
  2. jQuery.validator.addMethod("byteRangeLength",?function(value,?element,?param)?{??
  3. ????var?length?=?value.length;??
  4. ????for(var?i?=?0;?i?<?value.length;?i++){??
  5. ????????if(value.charCodeAt(i)?>?127){??
  6. ????????????length++;??
  7. ????????}??
  8. ????}??
  9. ??return?this.optional(element)?||?(?length?>=?param[0]?&&?length?<=?param[1]?);?????
  10. },?$.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));??
  11. ??
  12. //?邮政编码验证?????
  13. jQuery.validator.addMethod("isZipCode",?function(value,?element)?{?????
  14. ????var?tel?=?/^[0-9]{6}$/;??
  15. ????return?this.optional(element)?||?(tel.test(value));??
  16. },?"请正确填写您的邮政编码");??

?

radio和checkbox、select的验证
radio的required表示必须选中一个

Html代码??
  1. <input??type="radio"?id="gender_male"?value="m"?name="gender"?class="{required:true}"?/>??
  2. <input??type="radio"?id="gender_female"?value="f"?name="gender"/>??
  3. checkbox的required表示必须选中??
  4. <input?type="checkbox"?class="checkbox"?id="agree"?name="agree"?class="{required:true}"?/>??
  5. checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间??
  6. <input?type="checkbox"?class="checkbox"?id="spam_email"?value="email"?name="spam[]"?class="{required:true,?minlength:2}"?/>??
  7. <input?type="checkbox"?class="checkbox"?id="spam_phone"?value="phone"?name="spam[]"?/>??
  8. <input?type="checkbox"?class="checkbox"?id="spam_mail"?value="mail"?name="spam[]"?/>??
  9. ??
  10. select的required表示选中的value不能为空??
  11. <select?id="jungle"?name="jungle"?title="Please?select?something!"?class="{required:true}">??
  12. ????<option?value=""></option>??
  13. ????<option?value="1">Buga</option>??
  14. ????<option?value="2">Baga</option>??
  15. ????<option?value="3">Oi</option>??
  16. </select>??
  17. select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间??
  18. <select?id="fruit"?name="fruit"?title="Please?select?at?least?two?fruits"?class="{required:true,?minlength:2}"?multiple="multiple">??
  19. ????<option?value="b">Banana</option>??
  20. ????<option?value="a">Apple</option>??
  21. ????<option?value="p">Peach</option>??
  22. ????<option?value="t">Turtle</option>??
  23. </select>??

//////////////////////////////////////////////////////////////////////////////////////////////

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.