`
BlueFuture
  • 浏览: 53280 次
  • 性别: Icon_minigender_1
  • 来自: 大连
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery验证框架(六)内置验证方法 (jQuery validation)

阅读更多

jQuery验证框架

六、框架内建的验证方法( List of built-in Validation methods )

[1]  required( )       返回:Boolean
      说明:让表单元素必须填写(选择)。
                  如果表单元素为空(text input)或未选择(radio/checkbox)或选择了一个空值(select)。
                  作用于text inputs, selects, checkboxes and radio buttons.
                  当select提供了一个空值选项<option value="">Choose...</option>则强迫用户去选择一个不为空的值。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     fruit: "required"  
  4.   }   
  5. });  
$("#myform").validate({
  rules: {
    fruit: "required"
  }
});


[2]  required( dependency-expression )       返回:Boolean
      参数 dependency-expression     类型:String    在form上下文中的一个表达式( String ),表单元素是否需要填写依赖于该表达式返回一个或多个元素。
      说明:让表单元素必须填写(选择),依赖于参数的返回值。
                  表达式中像#foo:checked, #foo:filled, #foo:visible这样的选择过滤器将经常用到。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     details: {   
  4.       required: "#other:checked"  
  5.     }   
  6.   }, debug:true  
  7. });   
  8. $("#other").click(function() {   
  9.    $("#details").valid();   
  10. });  
$("#myform").validate({
  rules: {
    details: {
      required: "#other:checked"
    }
  }, debug:true
});
$("#other").click(function() {
   $("#details").valid();
});


[3]  required( dependency-callback )       返回:Boolean
      参数 dependency-callback     类型:Callback   该回函数以待验证表单元素作为其唯一的参数。当该回调函数返回true,则该表单元素是必须的。
      说明:让表单元素必须填写(选择),依赖于参数的返回值。
                  表达式中像#foo:checked, #foo:filled, #foo:visible这样的选择过滤器将经常用到。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     age: {   
  4.       required: true,   
  5.       min: 3   
  6.     },   
  7.     parent: {   
  8.       required: function(element) {   
  9.         return $("#age").val() < 13;   
  10.       }   
  11.     }   
  12.   }   
  13. });   
  14. $("#age").blur(function() {   
  15.     $("#parent").valid();   
  16. });  
$("#myform").validate({
  rules: {
    age: {
      required: true,
      min: 3
    },
    parent: {
      required: function(element) {
        return $("#age").val() < 13;
      }
    }
  }
});
$("#age").blur(function() {
    $("#parent").valid();
});


[4]  remote( options )       返回:Boolean
      参数 options      类型:String, Options    请求服务器端资源的url(String)。或$.ajax()方法中的选项(Options)。
      说明:请求服务器端资源验证。
                  服务器端的资源通过$.ajax (XMLHttpRequest)获取key/value对,响应返回true则表单通过验证。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     email: {   
  4.       required: true,   
  5.       email: true,   
  6.       remote: "check-email.php"  
  7.     }   
  8.   }   
  9. });  
$("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});


[5]  minlength( length )       返回:Boolean
      参数 length      类型:Integer    至少需要多少个字符数。
      说明:确保表单元素满足给定的最小字符数。
                  在文本框(text input)中输入的字符太少、没有选中足够的复选框(checkbox)、一个选择框(select)中没有选中足够的选项。这以上三种情况中该方法返回false。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       minlength: 3   
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});


[6]  maxlength( length )       返回:Boolean
      参数 length      类型:Integer    允许输入的最大字符数。
      说明:确保表单元素的文本不超过给定的最大字符数。
                  在文本框(text input)中输入的字符太多、选择太多的复选框(checkbox)、一个选择框(select)中没有选中太多的选项。这以上三种情况中该方法返回false。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       maxlength: 4   
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      maxlength: 4
    }
  }
});


[7]  rangelength( range )       返回:Boolean
      参数 range      类型:Array<Integer>    允许输入的字符数范围。
      说明:确保表单元素的文本字符数在给定的范围当中。
                  在文本框(text input)中输入的字符数不在给定范围内、选择的复选框(checkbox)不在给在的范围内、一个选择框(select)选中的选项不在给定的范围内。这以上三种情况中该方法返回false。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       rangelength: [2, 6]   
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      rangelength: [2, 6]
    }
  }
});


[8]  min( value )       返回:Boolean
      参数 value      类型:Integer    需要输入的最小整数。
      说明:确保表单元素的值大于等于给定的最小整数。
                  该方法只在文本输入框(text input)下有效。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       min: 13   
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      min: 13
    }
  }
});


[9]  max( value )       返回:Boolean
      参数 value      类型:Integer    给定的最大整数。
      说明:确保表单元素的值小于等于给定的最大整数。
                  该方法只在文本输入框(text input)下有效。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       max: 23   
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      max: 23
    }
  }
});


[10]  range( range )       返回:Boolean
      参数 range     类型:Array<Integer>    给定的整数范围。
      说明:确保表单元素的值在给定的范围当中。
                  该方法只在文本输入框(text input)下有效。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       range: [13, 23]   
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      range: [13, 23]
    }
  }
});


[11]  email( )       返回:Boolean
      说明:确保表单元素的值为一个有效的email地址。
                  如果值为一个有效的email地址,则返回true。该方法只在文本输入框(text input)下有效。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       email: true  
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});


[12]  url( )       返回:Boolean
      说明:确保表单元素的值为一个有效的URL地址(http://www.mydomain.com)。
                  如果值为一个有效的url地址,则返回true。该方法只在文本输入框(text input)下有效。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       url: true  
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});


[13]  date( )  dateISO( )  dateDE( )      返回:Boolean
      说明:用来验证有效的日期。这三个函数分别验证的日期格式为(mm/dd/yyyy)、(yyyy-mm-dd,yyyy/mm/dd)、(mm.dd.yyyy)。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       date: true  
  6.       /*dateISO: true  
  7.         dateDE: true*/  
  8.     }   
  9.   }   
  10. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      date: true
      /*dateISO: true
        dateDE: true*/
    }
  }
});


[14]  number( )  numberDE()      返回:Boolean
      说明:用来验证小数。number()的小数点为圆点( . ),numberDE()的小数点为英文逗号( , )。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       number: true  
  6.       //numberDE: true   
  7.     }   
  8.   }   
  9. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
      //numberDE: true
    }
  }
});


[15]  digits()      返回:Boolean
      说明:确保文本框中的值为数字。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       digits: true  
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      digits: true
    }
  }
});


[16]  digits()      返回:Boolean
      说明:确保文本框中的值为数字。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       digits: true  
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      digits: true
    }
  }
});


[17]  accept( [extension] )       返回:Boolean
      参数 extension(Optional)     类型:String    允许的文件后缀名,用"|"或","分割。默认为"png|jpe?g|gif"
      说明:确保表单元素接收给定的文件后缀名的文件。如果没有指定参数,则只有图片是允许的(png,jpeg,gif)。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       accept: "xls|csv"  
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      accept: "xls|csv"
    }
  }
});


[18]  equalTo( other )       返回:Boolean
      参数 other      类型:Selector    要与当前值比较的另一个表单元素。
      说明:确保两个表单元素的值是一致的。

Js代码 复制代码
  1. $("#myform").validate({   
  2.   rules: {   
  3.     password: "required",   
  4.     password_again: {   
  5.       equalTo: "#password"  
  6.     }   
  7.   }   
  8. });  
$("#myform").validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});






原文请见:http://docs.jquery.com/Plugins/Validation

---------------------------------------------------------------------------------------------------------------------------------------------------------

分享到:
评论
1 楼 lovefly_zero 2010-12-28  
很感谢你的文章 不过调整一下排版吧 冗余code太多了。

相关推荐

    jquery.validate Validation .js验证框架 帮助 手册 文档 chm

    jquery.validate Validation .js...(六)内置验证方法 (jQuery validation) 10 (七)注意事项 (jQuery validation) 16 (八)应用实例 (jQuery validation) 17 出处地址:http://koalaxyq.javaeye.com/blog/556633

    很不错的验证框架jquery

    标题中的“很不错的验证框架jquery”指的是jQuery Validation Plugin,这是一个非常流行且功能强大的JavaScript库,专门用于HTML表单验证。jQuery本身是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理和...

    jQueryvalidation验证框架.pdf

    除了内置的验证规则,如`required`、`minlength`等,jQuery Validation还允许你创建自定义的验证规则。这可以通过在`rules`选项中定义新的属性并为其指定一个函数来实现。 5. **错误消息**: 默认情况下,jQuery ...

    jQuery验证框架

    ### jQuery验证框架详解 #### 一、概述 jQuery Validation Plugin 是一个非常强大的验证插件,它可以帮助开发者轻松地实现客户端表单验证功能。此插件是基于jQuery开发的,因此可以充分利用jQuery的强大功能来简化...

    jQuery验证框架[收集].pdf

    (六)内置验证方法 框架预设了多种验证方法,如`required`(必填)、`email`(邮箱格式)、`url`(网址格式)、`number`(数字)等,这些方法可以直接应用于表单字段,简化验证过程。 (七)注意事项 在使用jQuery...

    jquery校验框架

    **jQuery验证框架详解** jQuery,一个轻量级、高性能的JavaScript库,因其简洁的API和强大的功能,成为了前端开发中的必备工具。其中,jQuery验证框架是用于实现表单验证的重要组成部分,它使得开发者能够轻松地为...

    JQuery验证框架

    JQuery验证框架包含了一系列内置的验证方法,这些方法覆盖了常见的验证需求,例如必填验证、邮箱格式验证、数字范围验证等。开发者可以直接调用这些方法来完成验证任务,无需重复造轮子。 #### 五、注意事项 在...

    Jquery前端表单验证插件formvalidation源码及示例

    **jQuery FormValidation插件**是前端开发中一个广泛使用的工具,专门用于实现高效且用户友好的表单验证。这个插件基于流行的JavaScript库jQuery构建,它简化了在Web应用程序中实施复杂的验证规则的过程。在标题提到...

    jquery验证框架

    jQuery Validation 是一个强大的JavaScript验证框架,它为网页表单提供了高度灵活且易于使用的验证功能。这个框架基于jQuery库,因此可以轻松地与jQuery其他插件和功能集成,为开发人员提供了一种简单的方法来实现...

    jquery-validation-1.9.0

    jQuery Validation插件是用于jQuery框架的强大的表单验证工具,它的出现极大地简化了这一过程。本文将详细介绍jQuery Validation插件,特别是1.9.0版本中的特性和使用方法。 首先,jQuery Validation插件是基于...

    jquery表单验证插件validationEngine---个人修改

    2. **验证规则**:ValidationEngine内置了多种验证规则,如`required`、`email`、`integer`等,也可自定义验证规则。 3. **提示消息**:通过`promptPosition`参数设置错误提示的位置,可以自定义提示样式和文本。 4....

    jquery-validation-1.13.0

    该插件提供了多种内置验证规则,如`required`(必填)、`email`(邮箱格式)、`url`(URL格式)等。通过设置`rules`属性,你可以指定每个输入字段的验证规则: ```javascript $("#myInput").rules("add", { ...

    表单验证jquery插件

    jQuery Validation Engine 是一个功能强大的表单验证插件,以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...

    jquery-validateEngine验证框架小demo

    `jQuery Validate Engine`是一个强大的表单验证插件,它扩展了`jQuery`的功能,使得开发者可以轻松地为网页表单创建美观且功能丰富的验证规则。这个小`demo`旨在帮助理解如何集成和使用该框架。 在`jQuery Validate...

    jquery.validate Validation .js验证框架 帮助 手册 文档.doc

    - jQuery Validate 提供了多种内置验证方法,如 `required`、`email`、`number`、`url` 等,可以直接应用于表单元素,确保用户输入符合特定格式。 7. **实用工具**: - 文档中提到的“实用工具”可能包括一些辅助...

    JQuery验证

    本篇文章将深入探讨jQuery验证插件的核心功能、使用方法以及常见的应用场景。 ### 1. jQuery验证插件简介 jQuery Validation Plugin是由Jörn Zaefferer开发的,它是一个轻量级且功能强大的验证库,可以轻松地与...

    基于jquery的表单验证框架

    除了使用内置的验证规则,还可以通过jQuery Validation Plugin的`.rules('add')`方法添加自定义验证规则。例如,验证密码强度: ```javascript $("#password").rules("add", { minlength: 8, maxlength: 20, ...

    jquery-validate前台验证框架,带详细使用方法

    《jQuery Validate 前台验证框架的详细使用指南》 jQuery Validate 是一款广泛使用的JavaScript库,专门用于在前端进行表单验证。它为HTML表单提供了强大的、易于使用的验证功能,能够有效地提升用户体验,确保用户...

    jquery-validation

    如果你的项目使用Bootstrap框架,`jQuery Validation`插件有一个Bootstrap样式适配器,可以轻松地使错误消息与Bootstrap的样式保持一致。 7. **API及插件扩展** `jQuery Validation` 提供了丰富的API接口,允许...

Global site tag (gtag.js) - Google Analytics