jQuery Validate

(转自http://www.w3cschool.cc/jquery/jquery-plugin-validate.html?utm_source=tuicool)

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

该 插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。目前版本是 1.13.1。

访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

导入 js 库

  1. <script src="../js/jquery.js" type="text/javascript"></script>
  2. <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 必须输入正确格式的日期。日期校验 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。

默认提示

  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 代码中加入:

  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 中,在页面中引入:

  1. <script src="../js/messages_cn.js" type="text/javascript"></script>

使用方式

1、将校验规则写到控件中

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

使用 class="{}" 的方式,必须引入包:jquery.metadata.js。

可以使用如下的方法,修改提示内容:

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

在使用 equalTo 关键字时,后面的内容必须加上引号,代码如下所示:

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

2、将校验规则写到 js 代码中

  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. });

messages 处,如果某个控件没有 message,将调用默认的信息

  1. <form id="signupForm" method="get" action="">
  2. <p>
  3. <label for="firstname">Firstname</label>
  4. <input id="firstname" name="firstname" />
  5. </p>
  6. <p>
  7. <label for="email">E-Mail</label>
  8. <input id="email" name="email" />
  9. </p>
  10. <p>
  11. <label for="password">Password</label>
  12. <input id="password" name="password" type="password" />
  13. </p>
  14. <p>
  15. <label for="confirm_password">确认密码</label>
  16. <input id="confirm_password" name="confirm_password" type="password" />
  17. </p>
  18. <p>
  19. <input class="submit" type="submit" value="Submit"/>
  20. </p>
  21. </form>

required:true 必须有值。
required:"#aa:checked" 表达式的值为真,则需要验证。
required:function(){} 返回为真,表示需要验证。

后边两种常用于,表单中需要同时填或不填的元素。

常用方法及注意问题

1、用其他方式替代默认的 SUBMIT

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

使用 ajax 方式

  1. $(".selector").validate({
  2. submitHandler: function(form)
  3. {
  4. $(form).ajaxSubmit();
  5. }
  6. })

可以设置 validate 的默认值,写法如下:

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

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

2、debug,只验证不提交表单

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

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

如果一个页面中有多个表单都想设置成为 debug,则使用:

  1. $.validator.setDefaults({
  2. debug: true
  3. })

3、ignore:忽略某些元素不验证

  1. ignore: ".ignore"

4、更改错误信息显示的位置

  1. errorPlacementCallback

指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。

  1. errorPlacement: function(error, element) {
  2. error.appendTo(element.parent());
  3. }

实例

  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>
  26.  
  27. errorPlacement: function(error, element) {
  28. if ( element.is(":radio") )
  29. error.appendTo( element.parent().next().next() );
  30. else if ( element.is(":checkbox") )
  31. error.appendTo ( element.next() );
  32. else
  33. error.appendTo( element.parent().next() );
  34. }

代码的作用是:一般情况下把错误信息显示在 <td class="status"></td> 中,如果是 radio 则显示在 <td></td> 中,如果是 checkbox 则显示在内容的后面。

参数 类型 描述 默认值
errorClass String 指定错误提示的 css 类名,可以自定义错误提示的样式。 "error"
errorElement String 用什么标签标记错误,默认是 label,可以改成 em。 "label"
errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
errorContainer: "#messageBox1, #messageBox2"
 
errorLabelContainer Selector 把错误信息统一放在一个容器里面。  
wrapper String 用什么标签再把上边的 errorELement 包起来。  

一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏。

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

5、更改错误信息显示的样式

设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个 validation.css,专门用于维护校验文件的样式。

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

6、每个字段验证通过执行函数

  1. successString,Callback

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

  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>。

  1. success: "valid"

7、验证的触发方式修改

下面的虽然是 boolean 型的,但建议除非要改为 false,否则别乱添加。

触发方式 类型 描述 默认值
onsubmit Boolean 提交时验证。设置为 false 就用其他方法去验证。 true
onfocusout Boolean 失去焦点时验证(不包括复选框/单选按钮)。 true
onkeyup Boolean 在 keyup 时验证。 true
onclick Boolean 在点击复选框和单选按钮时验证。 true
focusInvalid Boolean 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 true
focusCleanup Boolean 如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。 false
  1. // 重置表单
  2. $().ready(function() {
  3. var validator = $("#signupForm").validate({
  4. submitHandler:function(form){
  5. alert("submitted");
  6. form.submit();
  7. }
  8. });
  9. $("#reset").click(function() {
  10. validator.resetForm();
  11. });
  12.  
  13. });

8、异步验证

  1. remoteURL

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

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

远程地址只能输出 "true" 或 "false",不能有其他输出。

9、添加自定义校验

  1. addMethodname, method, message

自定义验证方法

  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. }, "请正确填写您的邮政编码");

注意:要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。

注意:在 messages_cn.js 文件中添加:isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。

10、radio 和 checkbox、select 的验证

radio 的 required 表示必须选中一个。

  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"/>

checkbox 的 required 表示必须选中。

  1. <input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox 的 minlength 表示必须选中的最小个数,maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。

  1. <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
  2. <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
  3. <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

select 的 required 表示选中的 value 不能为空。

  1. <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
  2. <option value=""></option>
  3. <option value="1">Buga</option>
  4. <option value="2">Baga</option>
  5. <option value="3">Oi</option>
  6. </select>

select 的 minlength 表示选中的最小个数(可多选的 select),maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。

  1. <select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
  2. <option value="b">Banana</option>
  3. <option value="a">Apple</option>
  4. <option value="p">Peach</option>
  5. <option value="t">Turtle</option>
  6. </select>

jQuery.validate 中文 API

名称 返回类型 描述
validate(options) Validator 验证所选的 FORM。
valid() Boolean 检查是否验证通过。
rules() Options 返回元素的验证规则。
rules("add",rules) Options 增加验证规则。
rules("remove",rules) Options 删除验证规则。
removeAttrs(attributes) Options 删除特殊属性并且返回它们。
自定义选择器
:blank Validator 没有值的筛选器。
:filled Array <Element> 有值的筛选器。
:unchecked Array <Element> 没选择的元素的筛选器。
实用工具
jQuery.format(template,argument,argumentN...) String 用参数代替模板中的 {n}。

Validator

validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容,下面列出几个常用的方法。

名称 返回类型 描述
form() Boolean 验证 form 返回成功还是失败。
element(element) Boolean 验证单个元素是成功还是失败。
resetForm() undefined 把前面验证的 FORM 恢复到验证前原来的状态。
showErrors(errors) undefined 显示特定的错误信息。
Validator 函数
setDefaults(defaults) undefined 改变默认的设置。
addMethod(name,method,message) undefined 添加一个新的验证方法。必须包括一个独一无二的名字,一个 JAVASCRIPT 的方法和一个默认的信息。
addClassRules(name,rules) undefined 增加组合验证类型,在一个类里面用多种验证方法时比较有用。
addClassRules(rules) undefined 增加组合验证类型,在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。

内置验证方式

名称 返回类型 描述
required() Boolean 必填验证元素。
required(dependency-expression) Boolean 必填元素依赖于表达式的结果。
required(dependency-callback) Boolean 必填元素依赖于回调函数的结果。
remote(url) Boolean 请求远程校验。url 通常是一个远程调用方法。
minlength(length) Boolean 设置最小长度。
maxlength(length) Boolean 设置最大长度。
rangelength(range) Boolean 设置一个长度范围 [min,max]。
min(value) Boolean 设置最小值。
max(value) Boolean 设置最大值。
email() Boolean 验证电子邮箱格式。
range(range) Boolean 设置值的范围。
url() Boolean 验证 URL 格式。
date() Boolean 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。
dateISO() Boolean 验证 ISO 类型的日期格式。
dateDE() Boolean 验证德式的日期格式(29.04.1994 或 1.1.2006)。
number() Boolean 验证十进制数字(包括小数的)。
digits() Boolean 验证整数。
creditcard() Boolean 验证信用卡号。
accept(extension) Boolean 验证相同后缀名的字符串。
equalTo(other) Boolean 验证两个输入框的内容是否相同。
phoneUS() Boolean 验证美式的电话号码。

validate ()的可选项

描述 代码
debug:进行调试模式(表单不提交)。
  1. $(".selector").validate
  2. ({
  3. debug:true
  4. })
把调试设置为默认。
  1. $.validator.setDefaults({
  2. debug:true
  3. })
submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。
  1. $(".selector").validate({
  2. submitHandler:function(form) {
  3. $(form).ajaxSubmit();
  4. }
  5. })
ignore:对某些元素不进行验证。
  1. $("#myform").validate({
  2. ignore:".ignore"
  3. })
rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象。
  1. $(".selector").validate({
  2. rules:{
  3. name:"required",
  4. email:{
  5. required:true,
  6. email:true
  7. }
  8. }
  9. })
messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数。
  1. $(".selector").validate({
  2. rules:{
  3. name:"required",
  4. email:{
  5. required:true,
  6. email:true
  7. }
  8. },
  9. messages:{
  10. name:"Name不能为空",
  11. email:{
  12. required:"E-mail不能为空",
  13. email:"E-mail地址不正确"
  14. }
  15. }
  16. })
groups:对一组元素的验证,用一个错误提示,用 errorPlacement 控制把出错信息放在哪里。
  1. $("#myform").validate({
  2. groups:{
  3. username:"fname
  4. lname"
  5. },
  6. errorPlacement:function(error,element) {
  7. if (element.attr("name") == "fname" || element.attr("name") == "lname")
  8. error.insertAfter("#lastname");
  9. else
  10. error.insertAfter(element);
  11. },
  12. debug:true
  13. })
Onubmit:类型 Boolean,默认 true,指定是否提交时验证。
  1. $(".selector").validate({
  2. onsubmit:false
  3. })
onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。
  1. $(".selector").validate({
  2. onfocusout:false
  3. })
onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。
  1. $(".selector").validate({
  2. onkeyup:false
  3. })
onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。
  1. $(".selector").validate({
  2. onclick:false
  3. })
focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。
  1. $(".selector").validate({
  2. focusInvalid:false
  3. })
focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)。
  1. $(".selector").validate({
  2. focusCleanup:true
  3. })
errorClass:类型 String,默认 "error"。指定错误提示的 css 类名,可以自定义错误提示的样式。
  1. $(".selector").validate({
  2. errorClass:"invalid"
  3. })
errorElement:类型 String,默认 "label"。指定使用什么标签标记错误。
  1. $(".selector").validate
  2. errorElement:"em"
  3. })
wrapper:类型 String,指定使用什么标签再把上边的 errorELement 包起来。
  1. $(".selector").validate({
  2. wrapper:"li"
  3. })
errorLabelContainer:类型 Selector,把错误信息统一放在一个容器里面。
  1. $("#myform").validate({
  2. errorLabelContainer:"#messageBox",
  3. wrapper:"li",
  4. submitHandler:function() {
  5. alert("Submitted!")
  6. }
  7. })
showErrors:跟一个函数,可以显示总共有多少个未通过验证的元素。
  1. $(".selector").validate({
  2. showErrors:function(errorMap,errorList) {
  3. $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
  4. this.defaultShowErrors();
  5. }
  6. })
errorPlacement:跟一个函数,可以自定义错误放到哪里。
  1. $("#myform").validate({
  2. rrorPlacement:function(error,element) {
  3. error.appendTo(element.parent("td").next("td"));
  4. },
  5. debug:true
  6. })
success:要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。
  1. $("#myform").validate({
  2. success:"valid",
  3. submitHandler:function() {
  4. alert("Submitted!")
  5. }
  6. })
highlight:可以给未通过验证的元素加效果、闪烁等。  

addMethod(name,method,message)方法

参数 name 是添加的方法的名字。

参数 method 是一个函数,接收三个参数 (value,element,param) 。
value 是元素的值,element 是元素本身,param 是参数。

我们可以用 addMethod 来添加除内置的 Validation 方法之外的验证方法。比如有一个字段,只能输一个字母,范围是 a-f,写法如下:

  1. $.validator.addMethod("af",function(value,element,params){
  2. if(value.length>1){
  3. return false;
  4. }
  5. if(value>=params[0] && value<=params[1]){
  6. return true;
  7. }else{
  8. return false;
  9. }
  10. },"必须是一个字母,且a-f");

如果有个表单字段的 id="username",则在 rules 中写:

  1. username:{
  2. af:["a","f"]
  3. }

addMethod 的第一个参数,是添加的验证方法的名字,这时是 af。
addMethod 的第三个参数,是自定义的错误提示,这里的提示为:"必须是一个字母,且a-f"。
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法。

如果只有一个参数,直接写,比如 af:"a",那么 a 就是这个唯一的参数,如果多个参数,则写在 [] 里,用逗号分开。

meta String 方式

  1. $("#myform").validate({
  2.  
  3. meta:"validate",
  4.  
  5. submitHandler:function() {
  6. alert("Submitted!") }
  7.  
  8. })
  1. <script type="text/javascript"
  2. src="js/jquery.metadata.js"></script>
  3.  
  4. <script type="text/javascript"
  5. src="js/jquery.validate.js"></script>
  6.  
  7. <form id="myform">
  8.  
  9. <input type="text"
  10. name="email" class="{validate:{ required:true,email:true }}" />
  11.  
  12. <input type="submit"
  13. value="Submit" />
  14.  
  15. </form>

学习validate的更多相关文章

  1. jquery validate学习心得

    据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...

  2. jquery 插件 validate 学习

    jquery是十分方便的对于现在来说. 首先应该明白一个问题: <p> <label  for="password">Password</label& ...

  3. 2.12 学习总结 之 表单校验插件validate

    一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...

  4. async-validator 源码学习笔记(六):validate 方法

    系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...

  5. 【Java EE 学习 33 下】【validate表单验证插件】

    一.validate 1.官方网站:http://jqueryvalidation.org/ 2.文档说明:http://jqueryvalidation.org/documentation/ 3.j ...

  6. validate插件深入学习-03validate()方法配置项

    validate()方法配置项 rules 定义校验规则 messages 定义提示信息 上面这两个已经介绍过了 rules里隐藏的属性depends,只有符合条件(返回true)的时候才会执行 su ...

  7. validate插件深入学习-02 常用方法和validate对象的方法

    ①检查表单元素是否有效 valid() 在表单内添加<button id="check">检查</button> $('#check').click(fun ...

  8. validate插件深入学习-01 小白从看透一个插件开始

    没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...

  9. jQuery学习笔记(jquery.validate插件)

    jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...

随机推荐

  1. 编程习题——Maximum Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  2. 射频识别技术漫谈(29)——射频接口芯片TRF7960

    TRF7960系列是TI推出的载波为13.56MHz.支持ISO15693.ISO14443A/B和FeliCa协议的射频接口芯片.许多人更关心它能不能读写MF1卡片,就我的理解及实际验证,由于MF1 ...

  3. 自己动手写RTP服务器——用RTP协议传输TS流

    上一篇文章我们介绍了关于RTP协议的知识,那么我们现在就自己写一个简单的传输TS流媒体的RTP服务器吧. 预备知识 关于TS流的格式:TS流封装的具体格式请参考文档ISO/IEC 13818-1.这里 ...

  4. [每日一题] OCP1z0-047 :2013-08-22 正则表达式---[^Ale|ax.r$]'

    正确答案:DE 一.Oracle正则表达式的相关知识点 '[^Ale|ax.r$]': ^:匹配行的开始字符 $:匹配行的结束字符 []:方括号表示指定一个匹配列表,该列表匹配列表中显示的任何表达式. ...

  5. 搭建一个Oracle到Oracle的Goldengate双向复制环境

    目标:搭建一个Oracle到Oracle的Goldengate双向复制环境(支持DDL+DML). 环境: OS:Red Hat Enterprise Linux Server release 5.5 ...

  6. 手把手教你在openshift上搭建wordpress博客(二)

    相同公布于:http://www.longgaming.com/archives/128 推荐前往阅读 这一篇文章主要介绍一些经常使用插件的使用和配置. 下面是我个人安装的一些插件.大家能够依据须要自 ...

  7. SQL Server索引进阶:第一级,索引简介

    这个并不是我翻译的,全文共有15篇,但我发现好多网站已经不全,所以自己整理. 原文地址: Stairway to SQL Server Indexes: Level 1, Introduction t ...

  8. word排版论文小结

    毕业论文如何用WORD排版 本人折腾了一晚上看别人的百度经验,做个总结,方便后人看懂,其实特别简单 用WORD自动生成页码 第一种情况:从第一页或者从第二页开始设置页码 这种情况只要“插入-> ...

  9. NSFileManager的应用

    单例,是在 一个文件中只创建一次就能够全部一起共享,多创建的地址是相同的 NSFileManager *manager=[NSFileManager defaultManager]; 是一个单例   ...

  10. BZOJ 2561: 最小生成树(最小割)

    U,V能在最小(大)生成树上,当且仅当权值比它小(大)的边无法连通U,V. 两次最小割就OK了. --------------------------------------------------- ...