jQuery.validity.js 使用说明

合集下载

jquery.validate_Validation_.js验证框架_帮助_手册_文档

jquery.validate_Validation_.js验证框架_帮助_手册_文档Html代码<scripttype="text/javascript"src="js/jquery-min.js"></script><scripttype="text/javascript"src="js/jquery.validate.pack.js"></scri pt><scripttype="text/javascript">$(document).ready(function(){$("#textForm").validate();});</script><formclass="cmxform"id="commentForm"method="get"action="">Name<inputid="cname"name="name"size="25"class="required"minlength="2 "/><inputclass="submit"type="submit"value="Submit"/></form>此文谨以以上js片段开始介绍jQueryValidation。

验证从这个方法开始：validate([options])（一）、可选项(options)[1]debug类型：Boolean默认：false说明：开启调试模式。

jquery validate动态添加和删除校验规则

jquery validate动态添加和删除校验规则随着jQuery的使用越来越广泛，jquery validate在前端表单校验中也变得越来越重要。

在使用jquery validate时，我们需要为表单的每个元素添加校验规则。

但有时候我们需要动态地添加或删除校验规则。

本文将围绕“jquery validate动态添加和删除校验规则”进行讲解。

1.获取validate对象在开始动态添加或删除校验规则前，我们需要先获取到该表单的validate对象。

可以通过以下代码获取：```javascriptvar validate = $("#form").validate();```其中，#form为表单的id。

2.动态添加校验规则当我们需要动态添加校验规则时，可以使用addMethod方法。

该方法用于添加自定义校验规则。

以下是方法的基本用法：```javascript$.validator.addMethod(name, method, message)```方法的参数说明如下：- name: 校验方法的名称，用于标识该校验方法；- method: 校验方法的处理函数，函数参数为当前元素的value值，函数返回true表示校验通过，false表示校验不通过；- message: 校验不通过时的错误提示信息。

具体可以参考下方代码：```javascript//新建一个校验规则$.validator.addMethod('chinese', function(value, element) {var chineseReg = /^[\u4e00-\u9fa5]+$/;return this.optional(element) || (chineseReg.test(value)); }, '只能输入中文字符！');//动态添加校验规则validate.rules['name'] = {required: true,chinese: true,minlength: 2,maxlength: 20};```以上代码中，我们定义了一个名为“chinese”的校验规则，用于判断输入的值是否为中文字符。

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笔记(表单验证)

JQuery笔记（表单验证）jquery.validate.js 是 jquery 旗下的一个验证插件，借助 jquery 的优势，我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。

举个例子，有这么一个表单：view plaincopy to clipboardprint?<form id="signupForm" method="get" action=""><fieldset><legend>Validating a complete form</legend><p><label for="firstname">Firstname</label><input id="firstname" name="firstname" class="required"/></p><p><label for="lastname">Lastname</label><input id="lastname" name="lastname" /></p><p><label for="username">Username</label><input id="username" name="username" /></p><p><label for="password">Password</label><input id="password" name="password" type="password" /></p><p><label for="confirm_password">Confirm password</label><input id="confirm_password" name="confirm_password" type="password" /></p><p><label for="email">Email</label><input id="email" name="email" /></p><p><input class="submit" type="submit" value="Submit"/></p></fieldset></form><form id="signupForm" method="get" action=""><fieldset><legend>Validating a complete form</legend><p><label for="firstname">Firstname</label><input id="firstname" name="firstname" class="required"/></p><p><label for="lastname">Lastname</label><input id="lastname" name="lastname" /></p><p><label for="username">Username</label><input id="username" name="username" /></p><p><label for="password">Password</label><input id="password" name="password" type="password" /></p><p><label for="confirm_password">Confirm password</label><input id="confirm_password" name="confirm_password" type="password" /></p><p><label for="email">Email</label><input id="email" name="email" /></p><p><input class="submit" type="submit" value="Submit"/></p></fieldset></form>在这个表单中，有名、姓、用户名、密码、确认密码和 email 。

jQuery-

data-val 表示是否需要对用户输入的值进行验证，默认设置为 true，后者则代表相应的验证规则。具体来说，去除“data-val-”前缀后的属性名称对应着采用 jQuery 验证时对应的验证规则名称（也就是我们后面所说的方法名称）。这句话初次听起来感觉有点莫名其妙，当介绍到后面时，你就会理解。显然可以看出来，2 行 mvc 代码生成出来 2 个 html 标签（input 和 span），其中 span 标签是隐藏，其作用是来显示错误信息的地方。这个 span 标签有 3 个属性，【class：MVC 自定义的一个样式，默认进入页面是 field-validation-valid，可以猜想，这个类有隐藏 span 标签的功能，稍后我们会去看这些类的介绍。data-valmsg-replace：默认是 true，用来设置错误信息是否删除，如果为 false，则始终在页面，只是影藏了而已， data-valmsg-for：这个属性是最重要的属性，后面紧跟着的值对应的是页面上标签的 name 值，以上图为例：意思是对 name=Chinese 的标签显示错误信息。（因为不对针对 Id，而是针对 name，所以我们可以用其对一组 checkbox 进行验证）】。现在来介绍刚才所说的 CSS
jQuery-validate 总结
内容提要
1. 介绍 MVC 自定义的验证规则，并详细描述其工作原理，如何实现客户端和服务端双重验证，MVC 下自动生成的 html 如何与 jQuery.validate.js、 jquery.validate.unobtrusive.js 配套使用。以【Required】为例。 2. 讨论过 MVC 的验证规则后，我们尝试自定义一个规则，并实现客户端和服务端双重验证 3. 扩展 MVC 已经拥有的验证，如：url

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 输入值不能小于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代码中加入：jQuery.extend(jQuery.validator.messages, {required: "必选字段",remote: "请修正该字段",email: "请输入正确格式的电子邮件",url: "请输入合法的网址",date: "请输入合法的日期",dateISO: "请输入合法的日期(ISO).",number: "请输入合法的数字",digits: "只能输入整数",creditcard: "请输入合法的信用卡号",equalTo: "请再次输入相同的值",accept: "请输入拥有合法后缀名的字符串",maxlength: jQuery.validator.format("请输入一个长度最多是{0} 的字符串"), minlength: jQuery.validator.format("请输入一个长度最少是{0} 的字符串"), rangelength: jQuery.validator.format("请输入一个长度介于{0} 和{1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于{0} 和{1} 之间的值"),max: jQuery.validator.format("请输入一个最大为{0} 的值"),min: jQuery.validator.format("请输入一个最小为{0} 的值")});推荐做法，将此文件放入messages_cn.js中，在页面中引入<script src="../js/messages_cn.js" type="text/javascript"></script>使用方式1.将校验规则写到控件中<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>$().ready(function() {$("#signupForm").validate();});<form id="signupForm" method="get" action=""><label for="firstname">Firstname</label><input id="firstname" name="firstname" class="required" /><label for="email">E-Mail</label><input id="email" name="email" class="required email" /><label for="password">Password</label><input id="password" name="password" type="password"class="{required:true,minlength:5}" /><label for="confirm_password">确认密码</label><input id="confirm_password" name="confirm_password" type="password"class="{required:true,minlength:5,equalTo:'#password'}" /><input class="submit" type="submit" value="Submit"/></form>使用class="{}"的方式，必须引入包：jquery.metadata.js可以使用如下的方法，修改提示内容：class="{required:true,minlength:5,messages:{required:'请输入内容'}}"在使用equalTo关键字时，后面的内容必须加上引号，如下代码：class="{required:true,minlength:5,equalTo:'#password'}"另外一个方式，使用关键字：meta（为了元数据使用其他插件你要包装你的验证规则在他们自己的项目中可以用这个特殊的选项）Tell the validation plugin to look inside a validate-property in metadata for validation rules.例如：meta: "validate"<input id="password" name="password" type="password"class="{validate:{required:true,minlength:5}}" />再有一种方式：$.metadata.setType("attr", "validate");这样可以使用validate="{required:true}"的方式，或者class="required"，但class="{required:true,minlength:5}"将不起作用2.将校验规则写到代码中1$(document).ready(function(){23/* 设置默认属性*/4$.validator.setDefaults({5submitHandler: function(form) { form.submit(); }6});7// 中文字两个字节8jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 9var length = value.length;10for(var i =0; i < value.length; i++){11if(value.charCodeAt(i) >127){12length++;13}14}15return this.optional(element) || ( length >= param[0] && length <= param[1] );16},"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");1718/* 追加自定义验证方法*/19// 身份证号码验证20jQuery.validator.addMethod("isIdCardNo", function(value, element) {21return this.optional(element) || isIdCardNo(value);22},"请正确输入您的身份证号码");2324// 字符验证25jQuery.validator.addMethod("userName", function(value, element) {26return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);27},"用户名只能包括中文字、英文字母、数字和下划线");2829// 手机号码验证30jQuery.validator.addMethod("isMobile", function(value, element) {31var length = value.length;32return this.optional(element) || (length ==11&& /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));33},"请正确填写您的手机号码");3435// 电话号码验证36jQuery.validator.addMethod("isPhone", function(value, element) {37var tel = /^(\d{3,4}-?)?\d{7,9}$/g;38return this.optional(element) || (tel.test(value));39},"请正确填写您的电话号码");4041// 邮政编码验证42jQuery.validator.addMethod("isZipCode", function(value, element) {43var tel = /^[0-9]{6}$/;44return this.optional(element) || (tel.test(value));45},"请正确填写您的邮政编码");46$(regFrom).validate({47/* 设置验证规则*/48rules: {49userName: {50required:true,51userName:true,52byteRangeLength: [3,15]53},54password: {55required:true,56minLength:557},58repassword: {59required:true,60minLength:5,61equalTo:"#password"62},63question: {64required:true65},66answer: {67required:true68},69realName: {70required:true71},72cardNumber: {73isIdCardNo:true74},75mobilePhone: {76isMobile:true77},78phone: {79isPhone:true80},81email: {82required:true,83email:true84},85zipCode: {86isZipCode:true87}88},89/* 设置错误信息*/90messages: {91userName: {92required:"请填写用户名",93byteRangeLength:"用户名必须在3-15个字符之间(一个中文字算2个字符)" 94},95password: {96required:"请填写密码",97minlength: jQuery.format("输入{0}.")98},99repassword: {100required:"请填写确认密码",101equalTo:"两次密码输入不相同"102},103question: {104required:"请填写您的密码提示问题"105},106answer: {107required:"请填写您的密码提示答案"108},109realName: {110required:"请填写您的真实姓名"111},112email: {113required:"请输入一个Email地址",114email:"请输入一个有效的Email地址"115}116},117/* 错误信息的显示位置*/118errorPlacement: function(error, element) {119error.appendTo( element.parent() );120},121/* 验证通过时的处理*/122success: function(label) {123// set as text for IE124label.html(" ").addClass("checked");125},126/* 获得焦点时不验证*/127focusInvalid:false,128onkeyup:false129});130131// 输入框获得焦点时，样式设置132$('input').focus(function(){133if($(this).is(":text") || $(this).is(":password"))134$(this).addClass('focus');135if ($(this).hasClass('have_tooltip')) {136$(this).parent().parent().removeClass('field_normal').addClass('field_focus');137}138});139140// 输入框失去焦点时，样式设置141$('input').blur(function() {142$(this).removeClass('focus');143if ($(this).hasClass('have_tooltip')) {144$(this).parent().parent().removeClass('field_focus').addClass('field_normal');145}146});});$(…#EditView‟).validate({event: “keyup”,rules:{name:{required:true},cosa_commodity_group_list:{required:true}},submitHandler:function(){$(“#group_list > option”).attr(“selected”,“selected”);$(this).submit();}});1.event是触发校验的方式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使用这个参数时就只在按提交按钮时触发2.如果在提交前还需要进行一些自定义处理使用submitHandler参数，其它的都比较简单，自己看看API就成了.3.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便.4.rules，所有的检验规则都写在这个参数里面.。

jquery.validate校验文件使用说明

jquery.validate校验⽂件使⽤说明⼀导⼊js库<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 必须输⼊正确格式的⽇期⽇期校验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验证代码：$().ready(function() {$("#newform").validate({rules: {classid: "required",title: {required:true,minlength:5,remote: {url: ajurl,//必须确保post到服务器端能正常输出true falsetype: "post",dataType: "json", //接受数据格式data: { //要传递的数据title: function() {return $("#title").val();}}}},isKeys: "required",},messages: {classid: "请选择分类",title: {required: "请输⼊新闻标题",minlength: "标题输⼊太短了",remote: "此标题已经存在，请修改",},isKeys: "请输⼊新闻关键字",}});});服务器端必须返回：true 或 false (必须⼩写)可以将以上代码加⼊独⽴js⽂件中调⽤错误提⽰样式：input.error { border: 1px dotted red; }label.error {background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}label.checked {background:url("./demo/images/checked.gif") no-repeat 0px 0px; border:1px solid #FFCC33;}默认错误时此插件将⾃动给当前html控件加⼊error样式，并跟<label class='error'>错误提⽰</label>，以上样式可控制错误显⽰效果。

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表单验证（动态字段验证）formValidate.js内容如下：formValidation:function(fields){ var rules = new Object(); var messages = new Object(); for(let i=0,len=fields.length;i<len;i++){ var obj = new Object(); var msg = new Object(); if(fields[i].required){ obj.required = true; msg.required = fields[i].displayname + "不能为空"; } //其他验证可以同上操作　 var name = fields[i].name; rules[name] = obj; messages[name] = msg; } $("#form").validate({ rules:rules, messages:messages, debug:false, errorClass:"validError", errorPlacement:function(error,element){ //针对select选择框，追加字段验证错误提⽰信息 if(element.is("select")){ //获取元素的name属性 var eid = element.attr("name"); //将错误信息添加到当前元素的⽗节点后⾯ error.appendTo(element.parent("div")); } else { error.insertAfter(element); } } });}动态字段添加字段验证：//id为动态字段id$("#id").rules("add",{required:true, messages:{ required:id不能为空, }});删除动态添加的字段验证：//id为动态添加的字段id$("#id").rules("remove");。

jquery.validate自定义验证方法及validate相关参数

jquery.validate⾃定义验证⽅法及validate相关参数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);validate ⾃定义验证$(document).ready( function() {/*** ⾝份证号码验证**/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;}/*** 判断是否为“YYYYMM”式的时期**/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}/*** 判断是否为“YYYYMMDD”式的时期**/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-\uFFE5\w]+$/.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}!"));// 验证值⼩数位数不能超过两位jQuery.validator.addMethod("decimal", function(value, element) {var decimal = /^-?\d+(\.\d{1,2})?$/;return this.optional(element) || (decimal.test(value));jQuery.validate ⽤法2010年04⽉12⽇星期⼀ 14:33名称返回类型描述validate(options) 返回:Validator 验证所选的FORMvalid() 返回:Boolean 检查是否验证通过rules() 返回:Options 返回元素的验证规则rules(add,rules) 返回:Options 增加验证规则rules(remove,rules)jquery.validate是⼀个基于jquery的⾮常优秀的验证框架，我们可以通过它迅速验证⼀些常见的输⼊,并且可以⾃⼰扩充⾃⼰的验证⽅法，⽽且对国际化也有⾮常好的⽀持。

网站开发常用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.validate.js的⽤法jquery.validate.js这个插件已经⽤了2年多了，是⼀个不可多得的表单验证最⽅便快捷的插件。

基于jquery的⼩插件，基本⼩⽩⼀学就会上⼿，对于项⽬表单页⾯⽐较多，元素⽐较多的校验，该插件基本分分钟就解决完。

本来想好好总结⼀下的。

暂放demo。

想参考⼀下这篇楼主的博⽂。

感觉总结的太好了！他的⽤法是结合jquery.validate.js写法基本是这个样⼦的class={};前端写法⽆限多，这⾥就不细细区别那种⽤法更好，没那精⼒。

其实引⽤这个写法的主要原因是他的写法会帮助我们动态校验⾃动⽣成的表格元素，总所周知啊：jquery.validate.js这个插件是基于表单的name名称进⾏校验的，⽽对于动态⽣成的表单这个name就有点困难困难了。

（除⾮你们想到name[i],i++这种低级想法。

因为后端基本不会给name起name1,name2,name3这种名字的，哪家也不这么在数据库⾥玩。

除⾮⾃⼰本地的同学们，哈哈哈！）废话少说。

这⾥就显出jquery.metadata.js他的⾼尚之品质！以下是我项⽬中的⼀个⼩代码$(".add).on("click",function(){var str='<tr class="trsec">'+'<td><select name="assessVoList[][productMetadataId]" id="" class="risk">'+options+'</select></td>'+'<td><select name="assessVoList[][LossTargetName]" class="subject">'+LossTargetNameid+'</select></td>'+'<td><select name="assessVoList[][LossTargetType]" class="sslb">'+lossFeeTypeListid+'</select></td>'+'<td><input type="text" value="'+item.losshow+'" placeholder="损失程度" name="assessVoList[][losshow]" class="losshow {required:true}"/></td>'+'<td><a class="sbtn delete deleteone" data-toggle="modal" data-target=".mydelete">删除</a></td>'+'</tr>';$(".two").find("tbody").append(str);})点击按钮，给表格动态增加⼀条数据时，对表单⾥的元素进⾏校验。

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的精髓，如果你完整理解了这个代码基本上算是入门了。

jQueryValidate数组全部验证问题

jQueryValidate数组全部验证问题
jquery validate撇开效率不说，功能上⽐较全，扩展⽐较简单，⽐较好⽤。

但是也不能涵盖所有。

下⾯举例说明
html中有多个name[]，每个参数都要进⾏验证是否为空，这个时候直接⽤required:true话，不能全部验证，只要这个数组中有⼀个有值就可以通过的。

//if ( in rulesCache || !validator.objectLength($(this).rules()) ) {
// return false;
//}
修改jquery.validate.js找到上⾯的代码，把它注释掉就⾏了。

这样改也是有问题，如果想⽤原来的功能，也就是数组，只要⼀个验证通过就都通过，就没办法⽤了。

这个时候，可以⽤jquery validate addmethod⽅法。

这样问题就都解决了。

以上所述是⼩编给⼤家介绍的jQuery Validate 数组全部验证问题，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持！。

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

jqueryValidator自定义校验规则的一种方式（覆盖源码）

jqueryValidator⾃定义校验规则的⼀种⽅式（覆盖源码）1.⾃定义js⽂件：jqValid-extend.js内容：function setDefaultValidate(){$.extend(true, $.validator, {// ⽅法methods: {//⼿机号"verifyPhone": function (value, element) {var mobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0-9]|17[0-9])\d{8}$/;return this.optional(element) || (mobile.test(value));},//固话,法⼈联系电话"verifyTel": function (value, element) {var mobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0-9]|17[0-9])\d{8}$/;var tel = /^0\d{2,3}-?\d{7,8}$/;return this.optional(element) || (tel.test(value))||(mobile.test(value));},//银⾏卡号"verifyCashCard": function (value, element) {var reg =/^([\d]){16,30}$/;return this.optional(element) || (reg.test(value));},//邮箱"verifyMail": function (value, element) {var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;return this.optional(element) || (mail.test(value));},//登录密码"verifyLoginPassword": function (value, element) {var regPwd= /^(?=.*\d.*\d)+(?=.*[a-z|A-Z]*.[a-z|A-Z]).{6,12}$/;return this.optional(element) || (regPwd.test(value));},//交易密码，确认密码"verifyCashPassword": function (value, element) {var regPwd= /^([\d]){6}$/;return this.optional(element) || (regPwd.test(value));},//证件号码"verifyIDCode": function (value, element) {var reg= /^([a-z|A-Z|()|+|0-9]){1,28}$/;return this.optional(element) || (reg.test(value));},//验证码"verifyVerifyCode": function (value, element) {var reg= /^([\d]){6}$/;return this.optional(element) || (reg.test(value));},//理顾⼯号"verifyAdvisorID": function (value, element) {var reg= /^H\d{6}$/;return this.optional(element) || (reg.test(value));},//申请编号"verifyApplyID": function (value, element) {var reg= /^([\d]){1,50}$/;return this.optional(element) || (reg.test(value));},//资质编号，产品备案编号"verifyZizhiID": function (value, element) {var reg= /^[\w|a-z|A-Z|\d]{1,30}$/;return this.optional(element) || (reg.test(value));},//注册资本"verifyRegZiben": function (value, element) {var reg= /^\d{1,14}$/;return this.optional(element) || (reg.test(value));},//法⼈职务"verifyLegalTitle": function (value, element) {var reg= /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/;return this.optional(element) || (reg.test(value));},//邮编"verifyMailCode": function (value, element) {var reg= /^\d{6}$/;return this.optional(element) || (reg.test(value));},//产品规模"verifyProductScale": function (value, element) {var reg= /^\d{1,14}$/;return this.optional(element) || (reg.test(value));},//产品存续期"verifyProductExpire": function (value, element) {var reg= /^\d{1,4}$/;return this.optional(element) || (reg.test(value));},//客户编号"verifyClientId": function (value, element) {var reg=/^\d{1,50}$/;return this.optional(element) || (reg.test(value));},//说明"verifyDescription": function (value, element) {var reg=/^[A-Za-z\u4e00-\u9fa5]{1,300}$/;return this.optional(element) || (reg.test(value));}},// 根据规则添加classRuleSettings: {required:{required:true},verifyPhone: {verifyPhone: true},verifyTel: {verifyTel: true},verifyMail: {verifyMail: true},verifyLoginPassword: {verifyLoginPassword: true},verifyCashPassword: {verifyCashPassword: true},verifyIDCode: {verifyIDCode: true},verifyVerifyCode: {verifyVerifyCode: true},verifyAdvisorID: {verifyAdvisorID: true},verifyApplyID: {verifyApplyID: true},verifyZizhiID: {verifyZizhiID: true},verifyRegZiben: {verifyRegZiben: true},verifyLegalTitle: {verifyLegalTitle: true},verifyMailCode: {verifyMailCode: true},verifyProductScale: {verifyProductScale: true},verifyProductExpire: {verifyProductExpire: true},verifyClientId: {verifyClientId: true},verifyDescription: {verifyDescription: true}},// ⽅法默认提⽰信息messages: {required: '不能为空！',verifyMobile: "请填写正确的⼿机号！",verifyMail: "请填写正确的邮箱！",verifyPassword: "6-12位，⾄少包含2个数字，2个字母！", verifyCode: "请填写正确的证件号码！",},// 默认选项defaults: {onkeyup: false,// 验证规则rules: {},// 验证失败的信息messages: {},// 错误被包裹的标签errorElement: 'span',// 忽略的元素ignore: '',// 提交事件submitHandler: function () {}}});}2.html标签中使⽤校验规则：<li><label>法⼈邮箱：</label><input name="lawEmail" id="legalEmail" type="text" value="{{=wEmail }}" class="public_input2" data-rule-verifyMail="true" data-msg-verifyMail="请输⼊正确的邮箱!" maxlength="30"></li>。