jQuery的validate插件使用整理(传智播客_王昭E)(精)

合集下载

jQuery表单校验插件validator使用方法详解

本文已被整理到了，欢迎大家学习阅读。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
<tr> <td>性别</td> <td> <input type="radio" id="male" value="m" name="sex" />男 <input type="radio" id="female" value="f" name="sex" />女 <label class="error" for="sex"></label>
validator表单校验的简单示例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css"> table { width: 30%;
<tr> <td></td> <td><input type="submit" id="smtBtn" value="确定"></td> </tr> </table> </form>

validate详解

},
psw1:{
required:true,
equalTo:"#psw",
},
mail:{
required:true,
email:true
},
tel:{
number:true,
isMobile:true,
});
<input id="firstname" name="firstname" class="required" />
<input id="email" name="email" class="required email" />
<input id="password" name="password" type="password" class="{ required :true, minlength :5}" />
},
psw:{
required:"密码不能为空",
rangelength:jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
},
psw1:{
required:"确认密码不能为空",
如果需要修改错误提示信息:class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
2.2将校验规则写到 js 代码中:

JQuery 插件Validate框架的学习总结(三)

jQuery.validator.setDefaults({
debug: true
});
关键字: jquery 插件validate框架的学习总结(二)
在页面导入相应的jquery和Validation的插件并导入并使用Validation框架
常用的限制使用如下：
<input type="submit" value="Validate!" />
</form>
在js中绑定的代码如下：
<script type="text/javascript">
jQuery(function($) {
$("#myform").validate(rules:{
{
//如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
alert("submitted!");
},此函数的签名同上. 我们可以在这个函数中, 编写在表单提交前需要处理的业务逻辑.
<script type="text/javascript" src="JsLib/jquery/jquery-ui-all-min-lastest.js"></script>
<script type="text/javascript" src="JsLib/jquery/plugin/jquery.validate/jquery.validate.min.js"></script>

jQuery中使用validate插件校验表单功能

jQuery中使⽤validate插件校验表单功能⼀.功能效果⼆.部分特殊规则2.1 错误信息位置更改在表单某选项中增加代码<label class="error" for="表单中选项的name"></label>例如 : 性别必选<td><input type="radio" id="male" value="m" name="sex"/>男<input type="radio" id="female" value="f" name="sex"/>⼥<label class="error" for="sex"></label></td>2.2 ⾝份证验证在<script>标签中 , 增加⾝份证格式验证的⾃定义规则/*⾝份证格式验证*/$.validator.addMethod("card", function (value, element, params) {var reg = /^\d{15}(\d{2}[\dX])?$/i;return reg.test(value);}, "idcard error");在rule和message中增加相应的规则判定$("#empForm").validate({rules: {idcard: {card: true}},messages: {idcard: {card: "请输⼊有效⾝份证号"}}});2.3 ⼿机号验证在<script>标签中 , 增加⼿机号格式验证的⾃定义规则/*⼿机号格式验证*/$.validator.addMethod("phone", function (value, element, params) {var reg = /^1[34578]\d{9}$/;return reg.test(value);}, "phone error");在rule和message中增加相应的规则判定$("#empForm").validate({rules: {phone: {phone: true}},messages: {phone: {phone: "请输⼊有效⾝份证号"}}});三.整体代码<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>我的jquery表单校验页⾯</title><style type="text/css">h1 {text-align: center;}table {width: 80%;margin: 0 auto;border-collapse: collapse;}td {padding: 10px 14px;border: 1px solid #999;}.error {color: red;}</style></head><body><h1>员⼯信息录⼊</h1><form name="empForm" id="empForm" method="get" action="#"><table><tr><td>真实姓名(不能为空 ,没有其他要求)</td><td><input type="text" id="realname" name="realname"/></td></tr><tr><td>登录名(登录名不能为空,长度应该在5-8之间:</td><td><input type="text" id="username" name="username"/></td></tr><tr><td>密码(不能为空,长度6-12之间):</td><td><input type="password" id="pwd" name="pwd"/></td></tr><tr><td>重复密码密码(不能为空,长度6-12之间):</td><td><input type="password" id="pwd2" name="pwd2"/></td></tr><tr><td>性别(必选其⼀)</td><td><input type="radio" id="male" value="m" name="sex"/>男<input type="radio" id="female" value="f" name="sex"/>⼥<label class="error" for="sex"></label></td></tr><tr><td>年龄(必填26-50):</td><td><input type="text" id="age" name="age"/></td></tr><tr><td>你的学历:</td><td><select name="edu" id="edu"><option value="">－请选择你的学历－</option><option value="a">专科</option><option value="b">本科</option><option value="c">研究⽣</option><option value="e">硕⼠</option><option value="d">博⼠</option></select></td></tr><tr><td>兴趣爱好:</td><td colspan="2"><input type="checkbox" name="hobby" id="pp" value="0"/>乒乓球 <input type="checkbox" name="hobby" id="ym" value="1"/>⽻⽑球 <input type="checkbox" name="hobby" id="sw" value="2"/>上⽹<input type="checkbox" name="hobby" id="ly" value="3"/>旅游<input type="checkbox" name="hobby" id="gw" value="4"/>购物</td></tr><tr><td align="left">电⼦邮箱(格式正确):</td><td><input type="text" id="email" name="email"/></td></tr><tr><td align="left">⾝份证(15-18,格式正确):</td><td><input type="text" id="idcard" name="idcard"/></td></tr><tr><td align="left">⼿机号(格式正确):</td><td><input type="text" id="phone" name="phone"/></td></tr><tr><td></td><td><input type="submit" id="smtBtn" value="保存"></td></tr></table></form><script src="./js/jquery-3.3.1.min.js"></script><script src="./js/jquery.validate.min.js"></script><script>/*页⾯加载完成后,开启表单验证的功能,这样每输⼊⼀个就会及时校验⼀个*/ $().ready(function () {/*校验表单项*/$("#empForm").validate({rules: {realname: {required: true},username: {required: true,rangelength: [5, 8]},pwd: {required: true,rangelength: [6, 12]},pwd2: {required: true,rangelength: [6, 12],/*重复密码需要与原密码相同的要求*/equalTo: "#pwd"},sex: {required: true},age: {required: true,range: [26, 50]},email: {email: true},idcard: {card: true},phone: {phone: true}},messages: {realname: {required: "真实姓名不能为空"},username: {required: "登录名不能为空",rangelength: "登录名长度要在5-8位之间"},pwd: {required: "密码不能为空",rangelength: "密码长度在6-12位之间"},pwd2: {required: "重复密码不能为空",rangelength: "重复密码长度在6-12位之间",equalTo: "重复密码与密码不⼀致"},sex: {required: "请选择性别"},age: {required: "年龄不能为空",range: "年龄必须在26-50岁之间"},email: {email: "请输⼊有效邮箱"},idcard: {card: "请输⼊有效⾝份证号"},phone: {phone: "请输⼊有效⼿机号"}}});});/*⾝份证格式验证*/$.validator.addMethod("card", function (value, element, params) {var reg = /^\d{15}(\d{2}[\dX])?$/i;return reg.test(value);}, "idcard error");/*⼿机号格式验证*/$.validator.addMethod("phone", function (value, element, params) {var reg = /^1[34578]\d{9}$/;return reg.test(value);}, "phone error");</script></body></html>四.validate表单校验常⽤规则总结以上所述是⼩编给⼤家介绍的jQuery中使⽤validate插件校验表单功能 ,希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

Jq_Validate 使用说明

一、导入js库<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.validate.js" type="text/javascript"></script><script src="js/jquery.metadata.js" type="text/javascript"></script><script src="js/messages_cn.js" type="text/javascript"></script><script src="js/common_validate.js" type="text/javascript"></script>二、默认校验规则规则描述序号1required:true必须输入的字段。

2remote:"check.php"使用ajax方法调用check.php验证输入值。

3email:true必须输入正确格式的电子邮件。

4url:true必须输入正确格式的网址。

5date:true必须输入正确格式的日期。

日期校验ie6出错，慎用。

6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。

只验证格式，不验证有效性。

7number:true必须输入合法的数字（负数，小数）。

8digits:true必须输入整数。

9creditcard:必须输入合法的信用卡号。

10equalTo:"#field"输入值必须和#field相同。

jQuery.Validate使用笔记（jQueryValidation范例）

jQuery.Validate使⽤笔记（jQueryValidation范例）验证操作类formValidatorClass.js复制代码代码如下:/*** @author ming*/$(document).ready(function(){/**//* 设置默认属性 */$.validator.setDefaults({submitHandler: function(form) {form.submit();}});// 字符验证jQuery.validator.addMethod("stringCheck", function(value, element) {return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);}, "只能包括中⽂字、英⽂字母、数字和下划线");// 中⽂字两个字节jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {var length = value.length;for(var i = 0; i < value.length; i++){if(value.charCodeAt(i) > 127){length++;}}return this.optional(element) || ( length >= param[0] && length <= param[1] );}, "请确保输⼊的值在3-15个字节之间(⼀个中⽂字算2个字节)");// ⾝份证号码验证jQuery.validator.addMethod("isIdCardNo", function(value, element) {return this.optional(element) || isIdCardNo(value);}, "请正确输⼊您的⾝份证号码");// ⼿机号码验证jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;return this.optional(element) || (length == 11 && mobile.test(value));}, "请正确填写您的⼿机号码");// 电话号码验证jQuery.validator.addMethod("isTel", function(value, element) {var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式************return this.optional(element) || (tel.test(value));}, "请正确填写您的电话号码");// 联系电话(⼿机/电话皆可)验证jQuery.validator.addMethod("isPhone", function(value,element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;var tel = /^\d{3,4}-?\d{7,9}$/;return this.optional(element) || (tel.test(value) || mobile.test(value));}, "请正确填写您的联系电话");// 邮政编码验证jQuery.validator.addMethod("isZipCode", function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");//开始验证$('#submitForm').validate({/**//* 设置验证规则 */rules: {username: {required:true,stringCheck:true,byteRangeLength:[3,15]},email:{required:true,email:true},phone:{required:true,isPhone:true},address:{required:true,stringCheck:true,byteRangeLength:[3,100]}},/**//* 设置错误信息 */messages: {username: {required: "请填写⽤户名",stringCheck: "⽤户名只能包括中⽂字、英⽂字母、数字和下划线",byteRangeLength: "⽤户名必须在3-15个字符之间(⼀个中⽂字算2个字符)"},email:{required: "请输⼊⼀个Email地址",email: "请输⼊⼀个有效的Email地址"},phone:{required: "请输⼊您的联系电话",isPhone: "请输⼊⼀个有效的联系电话"},address:{required: "请输⼊您的联系地址",stringCheck: "请正确输⼊您的联系地址",byteRangeLength: "请详实您的联系地址以便于我们联系您"}},/**//* 设置验证触发事件 */focusInvalid: false,onkeyup: false,/**//* 设置错误信息提⽰DOM */errorPlacement: function(error, element) {error.appendTo( element.parent());},});});测试页index.html复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>jQuery验证</title><script src="lib/jquery/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script> <script type="text/javascript" src="lib/jquery/messages_cn.js"></script><script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script><style type="text/css">* {}{font-family: Verdana;font-size: 96%;}label {}{width: 10em;float: left;}label.error {}{float: none;color: red;padding-left: .5em;vertical-align: top;}p {}{clear: both;}.submit {}{margin-left: 12em;}em {}{font-weight: bold;padding-right: 1em;vertical-align: top;}</style></head><body><form class="submitForm" id="submitForm" method="get" action=""><fieldset><legend>表单验证</legend><p><label for="username">⽤户名</label><em>*</em><input id="userName" name="username" size="25" /></p><p><label for="email">E-Mail</label><em>*</em><input id="email" name="email" size="25" /></p><p><label for="phone">联系电话</label><em>*</em><input id="phone" name="phone" size="25" value="" /></p><p><label for="address">地址</label><em>*</em><input id="address" name="address" size="22"></p><input class="submit" type="submit" value="提交"/></p></fieldset></form></body></html>校验规则参数格式为; name:{rule1, rule2 ....} name 要使⽤input 标签的name，之前，错误理解为 ID 了；提⽰信息使⽤ alert 输出:复制代码代码如下:errorPlacement: function (error, element) {if (error[0].textContent){Alert(error[0].textContext); }else {Alert(error[0].innerText); }}。

jQuery验证插件validate使用方法详解

jQuery验证插件validate使⽤⽅法详解1. 写在前⾯我们知道，⽤户在注册的时候，会有个表单页⾯，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在⽤户提交之前进⾏验证才⾏，如果不符合要求，需要在右边显⽰⼀个友好的提⽰，让⽤户修改。

记得以前在学习Servlet的时候，实现⼀个简单的⽤户注册功能的验证是在后台做的，有些⽤了正则表达式，有些没⽤，但是都⽐较简单。

流程是这样的，前台提交表单数据后，servlet获取数据先进⾏验证，如果不符合要求，将提⽰信息放到⼀个List中，然后再把List存到session中，跳转到⼀个新的页⾯做回显，把错误信息也显⽰出来，但是⽐较繁琐。

前⾯做⽹上商城项⽬的时候，⽤EasyUI做后台商品添加时，也做了验证的功能，EasyUI⾃带了验证的功能，还是很强⼤的，效果也不错。

感兴趣的话不妨来看⼀下。

但是前台⽤户注册的页⾯我们该如何做呢？这就是本⽂所要介绍的主要内容了，我们可以使⽤jQuery的Validate插件来做注册的验证功能，jQuery我也没有系统的学习，只是⽤到什么学什么，⽤到什么了解什么，所以如有错误之处，欢迎留⾔指正~下⾯我⼀步步通过代码详细介绍⼀下jQuery-Validate验证插件的使⽤步骤。

2. 效果展⽰⾸先来看⼀下最后实现的效果，先有个直观的感受，个⼈感觉还算可以的~能接受。

从图中可以看出，包括输⼊前的提⽰，输⼊正确和错误的提⽰的功能，都已经完成。

再看⼀下我的⼯程：总共有6个jsp⽂件，之所以写成6个是为了⼀步步解说做这个效果的步骤，最后terminal.jsp是最终版的。

运⾏的时候也只需要运⾏这个terminal.jsp即可。

下⾯我详细分析⼀下使⽤jQurey-Validate验证插件的过程。

3. Validate环境的搭建环境搭建，肯定少不了jar包，我使⽤的是jQuery-validate-1.15，官⽅上给出了依赖的⼏个版本的jQuery，我下了jQuery-1.11.1。

JqueryValidate相关参数及常用的自定义验证规则

JqueryValidate相关参数及常⽤的⾃定义验证规则⼀、官⽹地址：⼆、默认校验规则1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17(1) required:true必输字段(2) remote:"remote-valid.jsp"使⽤ajax⽅法调⽤remote-valid.jsp验证输⼊值(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:true必须输⼊合法的信⽤卡号(10) equalTo:"#password"输⼊值必须和#password相同(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三、默认的提⽰123 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21messages: {required: "This field is required.",remote: "Please fix this field.",email: "Please enter a valid email address.",url: "Please enter a valid URL.",date: "Please enter a valid date.",dateISO: "Please enter a valid date (ISO).",dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",number: "Please enter a valid number.",numberDE: "Bitte geben Sie eine Nummer ein.",digits: "Please enter only digits",creditcard: "Please enter a valid credit card number.",equalTo: "Please enter the same value again.",accept: "Please enter a value with a valid extension.",maxlength: $.validator.format("Please enter no more than {0} characters."),minlength: $.validator.format("Please enter at least {0} characters."),rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."),max: $.validator.format("Please enter a value less than or equal to {0}."),min: $.validator.format("Please enter a value greater than or equal to {0}.")},⽰例：$("#fm").validate({rules:{loginpwd:{required:true,minlength:6,maxlength:12,regex:"^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"},loginpwd2:{required:true,equalTo: "#loginpwd"，regex:"^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"}},messages:{loginpwd:{required: "请输⼊密码",minlength: "密码长度不能⼩于 6 个字母",regex:"密码必须包含⼤⼩写字母和数字的组合，不能使⽤特殊字符，长度在8-10之间" },loginpwd2:{required: "请输⼊密码",minlength: "密码长度不能⼩于 6 个字母",equalTo: "两次密码输⼊不⼀致",regex:"密码必须包含⼤⼩写字母和数字的组合，不能使⽤特殊字符，长度在8-10之间" } }});四、Jquery Validate ⾃定义验证规则addMethod(name,method,message)⽅法参数 name 是添加的⽅法的名字。

jQuery_validation验证框架使用方法

jQuery validation验证框架jQuery验证框架（一）可选项(jQuery validation)15人收藏此文章，收藏此文章发表于8个月前, 已有3152次阅读共0个评论15人收藏此文章jQuery验证框架Html代码1.<script type="text/javascript" src=js/jquery-1.3.2.min.js></script>2.<script type="text/javascript" src=js/jquery.validate.pack.js></script>3.<script type="text/javascript">4. $(document).ready(function(){5. $("#textForm").validate();6. });7.</script>8.<form class="cmxform" id="commentForm" method="get" action="">9. Name<input id="cname" name="name" size="25" class="required" minlength="2" />10. <input class="submit" type="submit" value="Submit"/>11.</form>此文谨以以上js片段开始介绍jQuery Validation。

jquery中validator的用法

jquery中validator的用法1.引言1.1 概述概述部分的内容可以包括以下内容：jQuery中的Validator是一个强大的表单验证插件，它可以帮助开发者对用户输入的表单数据进行有效的验证和过滤。

通过使用Validator，开发者可以轻松地验证用户输入的数据是否符合预期的格式和规则，从而提高应用程序的可靠性和安全性。

Validator的核心理念是基于规则和验证器，开发者可以定义各种验证规则，并将其应用到表单字段上。

当用户提交表单时，Validator会自动触发验证规则，并根据规则中定义的条件和要求对用户输入的数据进行验证。

如果输入数据符合规则要求，Validator将返回验证通过的结果，否则将返回相应的错误信息。

除了基本的验证功能，Validator还提供了丰富的扩展功能，如自定义错误消息、条件验证、异步验证等。

开发者可以根据实际需求进行配置和定制，使其更适应各种复杂的业务场景。

在使用Validator时，开发者只需简单地引入相应的脚本文件，并通过一些简单的代码片段即可实现表单的验证功能。

Validator提供了一系列方便的API和方法，可以帮助开发者更加灵活地控制和管理验证过程。

总之，通过使用jQuery中的Validator，开发者可以轻松地实现表单验证，并有效地提高应用程序的可靠性和用户体验。

在接下来的文章中，我们将详细介绍Validator的常用方法和用法，以及其优势和局限性。

文章结构部分应该介绍本文的整体结构和各个部分的内容概要。

可以按照以下方式编写1.2 文章结构的内容：1.2 文章结构本文分为引言、正文和结论三个部分。

引言部分主要介绍了本文的概述、文章结构和目的。

在概述中，简要介绍了将要讨论的主题——jquery中Validator的用法。

接下来，讲解了本文的文章结构，包括引言、正文和结论三个部分。

最后，明确了本文的目的，即介绍jquery中Validator的基本概念、常用方法和用法，以及讨论其优势和局限性。

网站开发常用jQuery插件总结(四)验证插件validation

网站开发常用jQuery插件总结(四）验证插件validation在网站开发过程中，有时我们需要验证用户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。

验证分两次进行，一次是在客户端，一次是在服务端。

客户端的验证可以提升用户的体验。

jquery验证插件有很多，实现的功能也基本相同。

本文介绍的只是jquery验证插件中的一种jquery.validate1.jquery.validate插件功能简单实现客户端信息验证，过滤不符合要求的信息2.jquery.validate官方地址官方地址：/,有详细的插件使用说明官方demo：http://jquery.bassistance.de/validate/demo/3.jquery.validate使用方法1.引用js<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.validate.js"></script>2.css样式，可自定义，简单的只需要添加error样式，也可使用官方demo中的样式。

.error{color:red;margin-left:8px;}3.js代码$(document).ready(function() {// validate signup form on keyup and submitvar validator = $("#signupform").validate({rules: {firstname: "required",username: {required: true,minlength: 2},password: {required: true,minlength: 5},password_confirm: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true,},dateformat: "required",terms: "required"},messages: {firstname: "姓名不能为空",username: {required: "用户名不能为空",minlength: jQuery.format("用户名只少由{0} 字符组成") },password: {required: "密码不能为空",minlength: jQuery.format("密码只少由{0} 字符组成") },password_confirm: {required: "确认密码不能为空",minlength: jQuery.format("确认密码只少由{0} 字符组成"),equalTo: "秘密与确认密码不一致"},email: {required: "邮箱不能为空",email: "邮箱格式不正确"},dateformat: "请选择性别",terms: " "},// the errorPlacement has to take the table layout into account errorPlacement: function(error, element) {if ( element.is(":radio") )error.appendTo( element.parent().next().next());else if ( element.is(":checkbox") )error.appendTo ( element.next());elseerror.appendTo( element.parent().next());},// specifying a submitHandler prevents the default submit, good for the demosubmitHandler: function() {alert("submitted!");},// set this class to error-labels to indicate valid fieldssuccess: function(label) {// set   as text for IElabel.html(" ").addClass("checked");},highlight: function(element, errorClass) {$(element).parent().next().find("." + errorClass).removeClass("checked");}});});以上的代码只使用了插件提供的属性和方法。

jquery.validate.js的基本用法入门

[转载] jQuery.Validate.js的基本用法入门jquery.validate.js是jquery下的一个验证插件，功能比较强大，早就有所耳闻但是一只没有动手用过，现在在于能够研究一下了。

这里转载一篇前辈写的文章，在我自己的理解上修改了一下，仅作记录。

先贴一个国内某大公司的代码：JavaScript代码<script type="text/javascript">function lang(key) {mylang = {'ls_input_myb': '请输入您的账户','ls_myb_email': '漫游币账户为邮箱地址','ls_login_password': '请输入您的登录密码','ls_password_length': '密码长度为{0}-{1}位之间','ls_input_captcha': '请输入验证码','ls_captcha_length': '验证码的长度为{0}位','ls_account_email': '账户名为邮箱地址','':''};return mylang[key];}</script><script type="text/javascript"> $(document).ready(function() {$("#loginForm").validate({rules: {uEmail: {required: true,email: true},uPassword: {required: true,rangelength: [6, 30]}},messages: {uEmail: {required: lang('ls_input_myb'),email: lang('ls_myb_email')},uPassword: {required: lang('ls_login_password'),rangelength:$.format(lang('ls_password_length'))}},errorPlacement: function(error, element) {var placement =$(element.parent("td").parent("tr").next("tr").find("td").get(1 ));placement.text('');error.appendTo( placement );},onkeyup: false});var accountTipsText = lang('ls_account_email');$("#uEmail").focus(function() {if (!$($(this).parent().parent().next().find('td').get(1)).text()) {$($(this).parent().parent().next().find('td').get(1)).html('<s pan class="font_888_8">' + accountTipsText +'</span>');}$(this).css('color', '#000');}).focus(); });</script>我就是从这个例子中开始的，其实这个例子几乎包含了jquery.validate.js的精髓，如果你完整理解了这个代码基本上算是入门了。

jquery表单验证插件（jquery.validate.js）的3种使用方式

jquery表单验证插件（jquery.validate.js）的3种使⽤⽅式jquery 验证⾮常简单，下⾯总结常⽤的三种⽅式：第⼀种⽅式：也是⽐较标准的⽅式：⾸先引⼊jquery 插件和 jquery 验证插件：第⼀步：引⼊插件复制代码代码如下:<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script>第⼆步：定义表单的错误输出：复制代码代码如下:<style type="text/css">#frm label.error {color: Red;}</style>第三步：添加错误处理⽅法；jquery验证，需要有：1：定义验证⽅法2：添加验证规则下⾯贴出常⽤的验证⼩例⼦，⼀看就明⽩了。

先看效果图：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script><style type="text/css">#frm label.error {color: Red;}</style></head><script type="text/javascript">$(document).ready(function(){$("#clickme").click(function(){alert("Hello World");});$( "#frm" ).validate({rules: {username: {required: true,minlength: 4,maxlength: 20,byteMaxLength:20,valiEnglish:true},postcode: {postcodeVal:true},number: {byteMaxLength:5,numFormat:5},identifier: {sfzhValidate:true}},messages: {username: {required: "请输⼊⽤户名4--20个英⽂字符",minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!")},number: {numFormat: $.format("请输⼊{0}数字")}}});jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod("numFormat",function(value,element,param){return this.optional(element) || /^\d*$/.test(value);}//,$.validator.format("请输⼊数字{0}位以内"));//number(9,3)jQuery.validator.addMethod("numFormat63",function(value,element){return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);},$.validator.format("请输⼊合法数字,精度格式123456.0"));jQuery.validator.addMethod("postcodeVal",function(value,element){return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);},$.validator.format("请输⼊合法的邮编"));jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);},$.validator.format("请输⼊字母或数字"));jQuery.validator.addMethod("sfzhValidate",function(value,element){return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);},$.validator.format("请输⼊合法⾝份证号"));jQuery.validator.addMethod("valiEnglish",function(value,element){return this.optional(element) || /^[a-zA-Z ]*$/.test(value);},$.validator.format("请输⼊字母或者空格"));});</script><body><form id="frm" name="frm" method="post" action=""><label>⽤户名:<input type="text" name="username" id="username" /></label><p><label>邮编 :<label></label></label><label><input type="text" name="postcode" id="postcode" /><br /></label></p><p><label>数字 :<input type="text" name="number" id="number" /></label><br /><label>⾝份证号：<input type="text" name="identifier" id="identifier" /></label> <label><input type="button" name="clickme" id="clickme" value="click me" /></label></p></form></body></html>这是⼀个完整的验证⽰例，关于引⼊的代码已经上传，可以下⾯讲解其中的重点⽅法：jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod() ⽅法，有三个参数,第⼀个参数： “byteMaxLength” 是定义⽅法名，必须保证⽅法名唯⼀，是⼀个identifier标志。

正则表达式使用

jQuery Validate验证框架详解jQuery校验官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validati on一、导入js库<script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script> 注：<%=request.getContextPath() %>返回web项目的根路径。

二、默认校验规则(1)、required:true必输字段(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值(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:true必须输入合法的信用卡号(10)、equalTo:"#password" 输入值必须和#password 相同(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三、默认的提示messages: {required: "This field is required.",remote: "Please fix this field.",email: "Please enter a valid email address.",url: "Please enter a valid URL.",date: "Please enter a valid date.",dateISO: "Please enter a valid date (ISO).",dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",number: "Please enter a valid number.",numberDE: "Bitte geben Sie eine Nummer ein.",digits: "Please enter only digits",creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.",accept: "Please enter a value with a valid extension.", maxlength: $.validator.format("Please enter no more than {0} characters."),minlength: $.validator.format("Please enter at least {0} characters."),rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),range: $.validator.format("Please enter a value between {0} and {1}."),max: $.validator.format("Please enter a value less than or equal to {0}."),min: $.validator.format("Please enter a value greater than or equal to {0}.")},如需要修改，可在js代码中加入：$.extend($.validator.messages, {required: "必选字段",remote: "请修正该字段",email: "请输入正确格式的电子邮件",url: "请输入合法的网址",date: "请输入合法的日期",dateISO: "请输入合法的日期 (ISO).",number: "请输入合法的数字",digits: "只能输入整数",creditcard: "请输入合法的信用卡号",equalTo: "请再次输入相同的值",accept: "请输入拥有合法后缀名的字符串",maxlength: $.validator.format("请输入一个长度最多是{0} 的字符串"),minlength: $.validator.format("请输入一个长度最少是{0} 的字符串"),rangelength: $.validator.format("请输入一个长度介于{0} 和 {1} 之间的字符串"),range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),max: $.validator.format("请输入一个最大为 {0} 的值"),min: $.validator.format("请输入一个最小为 {0} 的值")});推荐做法，将此文件放入messages_cn.js中，在页面中引入<script type="text/javascript" src="<%=path %>/validate/messages_cn.js"></script>四、使用方式1、metadata用法，将校验规则写到控件中<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":"+ request.getServerPort() + path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>jQuery Validate验证框架详解-metadata用法</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.mi n.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate .min.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata .min.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js" ></script><script type="text/javascript">$(function(){$("#myform").validate();});</script></head><body><form id="myform" method="post" action=""><p><label for="myname">用户名：</label><input id="myname"name="myname" class="required"/></p><p><label for="email">E-Mail：</label><input id="email"name="email" class="required email"/></p><p><label for="password">登陆密码：</label><input id="password"name="password" type="password"class="{required:true,minlength:5}" /></p><p><label for="confirm_password">确认密码：</label><input id="confirm_password" name="confirm_password" type="password"class="{required:true,minlength:5,equalTo:'#password'}"/></p><p><label for="confirm_password">性别：</label><input type="radio"id="gender_male" value="m" name="gender" class="{required:true}"/><input type="radio" id="gender_female" value="f" name="gender"/></p><p><label for="confirm_password">爱好：</label><input type="checkbox"id="spam_email" value="email"name="spam[]"class="{required:true, minlength:2}"/><input type="checkbox"id="spam_phone" value="phone" name="spam[]"/><input type="checkbox"id="spam_mail" value="mail" name="spam[]"/></p><p><label for="confirm_password">城市：</label><select id="jungle"name="jungle" title="Please select something!" class="{required:true}"><option value=""></option><option value="1">厦门</option><option value="2">泉州</option><option value="3">Oi</option></select></p><p><input class="submit"type="submit" value="立即注册"/></p></form></body></html>使用class="{}"的方式，必须引入包：jquery.metadata.js；可以使用如下的方法，修改提示内容：class="{required:true,minlength:5,messages:{required:'请输入内容'}}"；在使用equalTo关键字时，后面的内容必须加上引号，如下代码：class="{required:true,minlength:5,equalTo:'#password'}"。

jQueryValidate相关参数及常用的自定义验证规则

jQueryValidate相关参数及常⽤的⾃定义验证规则Jquery Validate 相关参数//定义中⽂消息var cnmsg = {required: “必选字段”,remote: “请修正该字段”,email: “请输⼊正确格式的电⼦邮件”,url: “请输⼊合法的⽹址”,date: “请输⼊合法的⽇期”,dateISO: “请输⼊合法的⽇期 (ISO).”,number: “请输⼊合法的数字”,digits: “只能输⼊整数”,creditcard: “请输⼊合法的信⽤卡号”,equalTo: “请再次输⼊相同的值”,accept: “请输⼊拥有合法后缀名的字符串”,maxlength: jQuery.format(“请输⼊⼀个长度最多是 {0} 的字符串”),minlength: jQuery.format(“请输⼊⼀个长度最少是 {0} 的字符串”),rangelength: jQuery.format(“请输⼊⼀个长度介于 {0} 和 {1} 之间的字符串”),range: jQuery.format(“请输⼊⼀个介于 {0} 和 {1} 之间的值”),max: jQuery.format(“请输⼊⼀个最⼤为 {0} 的值”),min: jQuery.format(“请输⼊⼀个最⼩为 {0} 的值”)};jQuery.extend(jQuery.validator.messages, cnmsg);Jquery Validate 验证规则(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 输⼊值不能⼩于10Jquery Validate ⾃定义验证规则addMethod(name,method,message)⽅法：参数name 是添加的⽅法的名字参数method是⼀个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本⾝ param是参数,我们可以⽤addMethod 来添加除built-in Validation methods 之外的验证⽅法⽐如有⼀个字段,只能输⼀个字母,范围是a-f,写法如下:$.validator.addMethod(“af”,function(value,element,params){if(value.length>1){return false;}if(value>=params[0] && value<=params[1]){return true;}else{return false;}},”必须是⼀个字母,且a-f”);⽤的时候,⽐如有个表单字段的id=”username”,则在rules 中写username:{af:["a","f"]}⽅法addMethod 的第⼀个参数,就是添加的验证⽅法的名⼦,这时是afaddMethod 的第三个参数,就是⾃定义的错误提⽰,这⾥的提⽰为:”必须是⼀个字母,且a-f”addMethod 的第⼆个参数,是⼀个函数,这个⽐较重要,决定了⽤这个验证⽅法时的写法如果只有⼀个参数,直接写,如果af:”a”,那么a 就是这个唯⼀的参数,如果多个参数,⽤在[]⾥,⽤逗号分开Jquery Validate submit 提交submitHandler: 通过验证后运⾏的函数,⾥⾯要加上表单提交的函数,否则表单不会提交$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); //⽤Jquery Form的函数 } })Jquery Validate error 错误提⽰dom.errorPlacement：Callback Default: 把错误信息放在验证的元素后⾯指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后⾯errorPlacement: function(error, element) {error.appendTo(element.parent());}设置错误提⽰的样式，可以增加图标显⽰，like：input.error { border: 1px solid red; }label.error {background:url(“./demo/images/unchecked.gif”) no-repeat 0px 0px;padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}附录：常⽤的⾃定义验证规则// 字符验证jQuery.validator.addMethod(“stringCheck”, function(value, element) {return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);}, ”只能包括中⽂字、英⽂字母、数字和下划线”);// 中⽂字两个字节jQuery.validator.addMethod(“byteRangeLength”, function(value, element, param) {var length = value.length;for(var i = 0; i < value.length; i++){if(value.charCodeAt(i) > 127){length++;}}return this.optional(element) || ( length >= param[0]&&length <= param[1] );}, ”请确保输⼊的值在3-15个字节之间(⼀个中⽂字算2个字节)”);// ⾝份证号码验证jQuery.validator.addMethod(“isIdCardNo”, function(value, element) {return this.optional(element) || isIdCardNo(value);}, ”请正确输⼊您的⾝份证号码”);// ⼿机号码验证jQuery.validator.addMethod(“isMobile”, function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;return this.optional(element) || (length == 11 && mobile.test(value)); }, ”请正确填写您的⼿机号码”);// 电话号码验证jQuery.validator.addMethod(“isTel”, function(value, element) {var tel = /^d{3,4}-?d{7,9}$/; //电话号码格式************return this.optional(element) || (tel.test(value));}, ”请正确填写您的电话号码”);// 联系电话(⼿机/电话皆可)验证jQuery.validator.addMethod(“isPhone”, function(value,element) { var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;var tel = /^d{3,4}-?d{7,9}$/;return this.optional(element) || (tel.test(value) || mobile.test(value)); }, ”请正确填写您的联系电话”);// 邮政编码验证jQuery.validator.addMethod(“isZipCode”, function(value, element) { var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, ”请正确填写您的邮政编码”);function isIdCardNo(num) {var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1); var parityBit=new Array(“1″,”0″,”X”,”9″,”8″,”7″,”6″,”5″,”4″,”3″,”2″); var varArray = new Array();var intValue;var lngProduct = 0;var intCheckDigit;var intStrLen = num.length;var idNumber = num;// initializeif ((intStrLen != 15) && (intStrLen != 18)) {return false;}// check and set valuefor(i=0;i<intStrLen;i++) {varArray[i] = idNumber.charAt(i);if ((varArray[i] < '0′ || varArray[i] > '9′) && (i != 17)) {return false;} else if (i < 17) {varArray[i] = varArray[i] * factorArr[i];}}if (intStrLen == 18) {//check datevar date8 = idNumber.substring(6,14);if (isDate8(date8) == false) {return false;}// calculate the sum of the productsfor(i=0;i<17;i++) {lngProduct = lngProduct + varArray[i];}// calculate the check digitintCheckDigit = parityBit[lngProduct % 11];// check last digitif (varArray[17] != intCheckDigit) {return false;}}else{ //length is 15//check datevar date6 = idNumber.substring(6,12);if (isDate6(date6) == false) {return false;}}return true;}function isDate6(sDate) {if(!/^[0-9]{6}$/.test(sDate)) {return false;}var year, month, day;year = sDate.substring(0, 4);month = sDate.substring(4, 6);if (year < 1700 || year > 2500) return falseif (month < 1 || month > 12) return falsereturn true}function isDate8(sDate) {if(!/^[0-9]{8}$/.test(sDate)) {return false;}var year, month, day;year = sDate.substring(0, 4);month = sDate.substring(4, 6);day = sDate.substring(6, 8);var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]if (year < 1700 || year > 2500) return falseif (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;if (month < 1 || month > 12) return falseif (day < 1 || day > iaMonthDays[month - 1]) return falsereturn true}// ⾝份证号码验证jQuery.validator.addMethod(“idcardno”, function(value, element) {return this.optional(element) || isIdCardNo(value);}, “请正确输⼊⾝份证号码”);//字母数字jQuery.validator.addMethod(“alnum”, function(value, element) {return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);}, “只能包括英⽂字母和数字”);// 邮政编码验证jQuery.validator.addMethod(“zipcode”, function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, “请正确填写邮政编码”);// 汉字jQuery.validator.addMethod(“chcharacter”, function(value, element) {var tel = /^[u4e00-u9fa5]+$/;return this.optional(element) || (tel.test(value));}, “请输⼊汉字”);// 字符最⼩长度验证（⼀个中⽂字符长度为2）jQuery.validator.addMethod(“stringMinLength”, function(value, element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length >= param);}, $.validator.format(“长度不能⼩于{0}!”));// 字符最⼤长度验证（⼀个中⽂字符长度为2）jQuery.validator.addMethod(“stringMaxLength”, function(value, element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format(“长度不能⼤于{0}!”));// 字符验证jQuery.validator.addMethod(“string”, function(value, element) {return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);}, “不允许包含特殊符号!”);// ⼿机号码验证jQuery.validator.addMethod(“mobile”, function(value, element) {var length = value.length;return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/.test(value)); }, “⼿机号码格式错误!”);// 电话号码验证jQuery.validator.addMethod(“phone”, function(value, element) {var tel = /^(d{3,4}-?)?d{7,9}$/g;return this.optional(element) || (tel.test(value));}, “电话号码格式错误!”);// 邮政编码验证jQuery.validator.addMethod(“zipCode”, function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, “邮政编码格式错误!”);// 必须以特定字符串开头验证jQuery.validator.addMethod(“begin”, function(value, element, param) {var begin = new RegExp(“^” + param);return this.optional(element) || (begin.test(value));}, $.validator.format(“必须以 {0} 开头!”));// 验证两次输⼊值是否不相同jQuery.validator.addMethod(“notEqualTo”, function(value, element, param) {return value != $(param).val();}, $.validator.format(“两次输⼊不能相同!”));// 验证值不允许与特定值等于jQuery.validator.addMethod(“notEqual”, function(value, element, param) {return value != param;}, $.validator.format(“输⼊值不允许为{0}!”));// 验证值必须⼤于特定值(不能等于)jQuery.validator.addMethod(“gt”, function(value, element, param) {return value > param;}, $.validator.format(“输⼊值必须⼤于{0}!”));案例1：<style type="text/css">* { font-family: Verdana; font-size: 96%; }label { width: 10em; float: left; }label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }p { clear: both; }.submit { margin-left: 12em; }em { font-weight: bold; vertical-align: top;width: 22px; display: inline-block; }i.error {background:url("images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;font-style: inherit;} i.success {background:url("images/checked.gif") no-repeat 0px 0px; padding-left: 16px;font-style: inherit;} input{width: 230px;}</style><script type="text/javascript">$(document).ready(function(){//⾃定义⼀个验证⽅法$.validator.addMethod("formula", //验证⽅法名称function(value, element, param) {//验证规则return value == eval(param);},'请正确输⼊数学公式计算后的结果'//验证提⽰信息);$("#commentForm").validate({rules: {username: {required: true,minlength: 2},email: {required: true,email: true},url:"url",comment: "required",valcode: {formula: "7+9"}},messages: {username: {required: '请输⼊姓名',minlength: '请⾄少输⼊两个字符'},email: {required: '请输⼊电⼦邮件',email: '请检查电⼦邮件的格式'},url: '请检查⽹址的格式',comment: '请输⼊您的评论'},errorElement: "i",//⽤来创建错误提⽰信息标签success: function(label) {//验证成功后的执⾏的回调函数//label指向上⾯那个错误提⽰信息标签emlabel.text(" ")//清空错误提⽰消息.addClass("success");//加上⾃定义的success类}});});</script><form class="cmxform" id="commentForm" method="get" action=""><legend>⼀个简单的验证带验证提⽰的评论例⼦</legend><p><label for="cusername">姓名</label><em>*</em><input id="cusername" name="username" size="25" /></p><p><label for="cemail">电⼦邮件</label><em>*</em><input id="cemail" name="email" size="25" /></p><p><label for="curl">⽹址</label><em> </em><input id="curl" name="url" size="25" value="" /></p><p><label for="ccomment">你的评论</label><em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea></p><p><label for="cvalcode">验证码</label><em> </em><input id="cvalcode" name="valcode" size="25" value="" />=7+9</p><p><input class="submit" type="submit" value="提交"/></p></form>以上所述是⼩编给⼤家介绍的jQuery Validate 相关参数及常⽤的⾃定义验证规则，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。