JQuery验证
jquery validate和validform验证插件的对比
此文在jquery的验证插件（下文以jquery代替）和validform验证插件之间作如下对比：1、样式2、普通验证：3、自定义验证：4、Ajax验证：一、样式1、Jquery（可自定义提示信息样式，下图摘自官方文档）：2、Validform（提供七种内置方案并支持自定义，以下为七种内置的较常用的三种）：二、普通验证1、Jquery：Jquery支持两种方式验证：1、直接将规则绑定到元素上。
2、将规则写在初始化js 中1、直接将规则绑定到元素上。
<form class="cmxform" id="form2" method="get" action=""><fieldset><legend>验证一个完整的表单</legend><p><label for="email">Email</label><input id="email" name="email" required type="email"></p><p><label for="agree">喜欢的颜色</label><select id="color" name="color" title="请选择您喜欢的颜色！" required><option></option><option>红色</option><option>蓝色</option><option>黄色</option></select></p><p><label for="phone">电话</label><input id="phone" name="phone" required type="number" rangelength="[2,8]"> </p><p><label for="address">地址</label><input id="address" name="address" required minlength="3"></p><p><label for="avatar">头像</label><input type="file" id="avatar" name="avatar" required></p><p><label for="agree">请同意我们的条款</label><input type="checkbox" class="checkbox" id="agree" title="请同意我们的条款！" name="agree" required></p><p><input class="submit" type="submit" value="提交"/><input class="cancel" type="submit" value="取消"/></p></fieldset></form>2、将规则下载初始化js中$().ready(function() {$("#signupForm").validate({rules: {firstname: "required",email: {required: true,email: true},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"}},messages: {firstname: "请输入姓名",email: {required: "请输入Email地址",email: "请输入正确的email地址"},password: {required: "请输入密码",minlength: jQuery.format("密码不能小于{0}个字符")},confirm_password: {required: "请输入确认密码",minlength: "确认密码不能小于5个字符",equalTo: "两次输入密码不一致不一致"}}});});2、Validform：Validform也支持两种：1、直接将规则绑定到元素上。
jQuery formValidator表单验证插件
jQuery formValidator表单验证插件是什么?jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。
你可以划分多个校验组，每个组的校验都是互不影响。
对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。
目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库）、functionValidator （可使用外部函数来做校验）本插件于其他校验控件最大的区别有3点：1、校验功能可以扩展。
对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制，别的表单校验控件是代码里写死的，而formValidator是通过外部js文件来扩展的，你可以通过写正则表达式和函数来无限的扩展这些功能。
2、实现了校验代码于html代码的完全分离。
你的所有信息都无需配置在校验表单元素上，你只要在js上配置你的信息。
使美工（界面）和javascript工程师的工作不交织在一起3、你只需写一行代码就能完成一个表单元素的所有校验。
你只需要写一行代码就能完成一下所有的控制∙支持所有类型客户端控件的校验∙支持jQuery所有的选择器语法，只要控件有唯一ID和type属性∙支持函数和正则表达式的扩展。
提供扩展库formValidatorReg.js，你可以自由的添加、修改里面的内容。
∙支持2种校验模式。
第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式)∙支持多个校验组。
jquery里用正则来验证密码，必须包含大小写字母，数字及特殊符号，或最少包含两种
jquery⾥⽤正则来验证密码，必须包含⼤⼩写字母，数字及特殊符号，或最少包含两种我们在web开发中，经常会⽤到正则来验证⽤户所输⼊和提交的内容，所以站长也会经常收集和整理⼀些好⽤的正则表达式，记录和整理本来就是学习过程中的⼀部分，今天在⽹上看到有⼈在询问⼀个正则，就⾃⼰写了⼀下，拿出来与⼤家分享。
⼀：要求⽤正则来验证⽤户输⼊的密码，⾄少包含⼤⼩字字母，数字和特殊符号中两种，简单的说，就是验证⽤户输⼊的密码不能太简单。
乍⼀想，这种正则好像不太⽅便下⼿写，⾄少以前站长在验证⽤户输⼊的密码格式时，都是分步来写的，⽐如：if(/[a-z]/g.test(v)){alert("不能纯为⼩写字母");return false;}else if(/[A-Z]/g.test(v)){alert("不能纯为⼤写字母");return false;}else if(/[0-9]/g.test(v)){alert("不能纯为数字");return false;}else if(/[^0-9a-zA-Z]/g.test(v)){alert("不能纯为⾮字母和数字的特殊符号");return false;}现在技术⽐以前好了那么“⼀丢丢”，就在想，能不能⽤⼀句正则来实现呢？当然是可以的，下⾯是具体的正则：var v=$("#text").val();reg=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;alert(reg.test(v));上⾯的正则表达的意思是，不能为纯数字，不能为纯⼩写字母，不能为纯⼤写字母，不能为纯特殊符号，⾄少六位。
不要看着有点复杂，其实很简单的，站长来给⼤家拆开分析⼀下：(?!) 这是正则⾥的⼀个“语法结构”，表⽰“规定后⾯不是”的意思，看这篇《jquery正则中问号的三种[说四种那是忽悠⼈]⽤法详解及在线实例演⽰》了解了上⾯这⼀句，那么上⾯的正则就好理解了：(?![0-9]+$) 表⽰后⾯不能为纯数字(?![a-z]+$) 表⽰后⾯不能为纯⼩写字母(?![A-Z]+$) 表⽰后⾯不能为纯⼤写字母(?!([^(0-9a-zA-Z)])+$) 表⽰后⾯不能为除数字和字母外的纯特殊符号^ 这个符号单独⽤表⽰“开头”，⽤在中括号的开头，表⽰“⾮”；.{6,} 表⽰⾄少6位的任意字符$ 表⽰“结尾”⼆：另外还有⼀种情况，那就是，有时我们需要我们的密码必须为“字母+数字+特殊符号”，那么我们要如何写呢？(?![0-9a-z]+$) 不能为⼩写字母与数字(?![0-9A-Z]+$) 不能为⼤写字母与数字(?![0-9\W]+$) 不能为数字及特殊符号(?![a-z\W]+$) 不能为⼩写字母及特殊符号(?![A-Z\W]+$) 不能为⼤写字母及特殊符号(?![0-9a-zA-Z]+$) 不能为⼤写，⼩写字母与数字把这三种情况也加上去后，就只剩下“必须包含数字、⼤⼩写字母和特殊符号”这⼀种情况了，但是我们也得出了⼀个超长的正则，这⾥就不写了！那么有没有简单的⽅法呢？当然是有的：var v=$("#text").val();reg=/^(?=.*[a-zA-Z])(?=.*[1-9])(?=.*[\W]).{6,}$/;alert(reg.test(v));(?=)这个语法结构在正则⾥表⽰“设定后⾯是”的意思。
jqueryvalidate自定义验证方法日期验证
jqueryvalidate自定义验证方法日期验证在jqueryvalidate中，可以使用自定义验证方法来实现日期验证。
具体的实现步骤如下：1. 首先，在html页面中引入jquery库和jqueryvalidate插件。
确保在引入jqueryvalidate插件之前引入jquery库。
```html```2. 接下来，在表单中的日期字段设置一个合适的id属性，例如`id="dob"`：```html<form id="myForm"><label for="dob">Date of Birth:</label><input type="date" id="dob" name="dob" required><button type="submit">Submit</button></form>```3. 然后，在JavaScript代码中定义一个自定义验证方法来验证日期格式。
在这个方法中，可以使用正则表达式来匹配日期的格式，例如`yyyy-mm-dd`。
如果格式不匹配，则返回`false`，否则返回`true`。
```javascript$.validator.addMethod("dateformat", function (value, element) var dateRegex = /^(19，20)\d\d-(0\d，1[012])-(0\d，1\d，2[0-9]，3[01])$/;return this.optional(element) ， dateRegex.test(value);}, "Please enter a valid date format (yyyy-mm-dd)");```4. 最后，使用validate方法来初始化表单验证，并添加自定义验证方法到`rules`对象中：```javascript$(document).ready(function$('#myForm').validaterules:dob:required: true,dateformat: true}},messages:dob:required: "Date of Birth is required"}},submitHandler: function (form)//表单验证通过form.submit(;}});});```在上面的代码中，`rules`对象用于指定`dob`字段需要应用自定义验证方法，并且该字段是必填的。
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 。
jqueryvalidate自定义验证方法日期验证
jqueryvalidate⾃定义验证⽅法⽇期验证jquery validate有很多验证规则，但是更多的时候，需要根据特定的情况进⾏⾃定义验证规则。
这⾥就来聊⼀聊jquery validate的⾃定义验证。
jquery validate有⼀个⽅法，可以让⽤户来⾃定义验证规则。
案例⼀：//⾃定义验证$.validator.addMethod("isPositive",function(value,element){var score = /^[0-9]*$/;return this.optional(element) || (score.test(value));},"<font color='#E47068'>请输⼊⼤于0的数字</font>");通过addMethod⽤户可以⾃定义⾃⼰的验证规则这个⽅法有三个参数，第⼀个参数表⽰验证规则名称，这⾥是isPositive，表⽰是否为正数。
第⼆个参数是真正的验证主体，它是⼀个函数，函数的第⼀个value表⽰调⽤这个验证规则的表单的值，第⼆个element可以⽤来判断是否为空，为空的时候，就不调⽤这个验证规则了。
第三个参数是返回的错误提⽰。
具体如何使⽤呢？其实跟jquery validate固有的验证规则使⽤是⼀样的。
<tr bgcolor="#f7f7f7" height="43" align="right"><td class="font14_s pdr_12 grey_70">总分:</td><td class="font14_s pl40" align="left"><input type="text" id="fullscore" name="fullscore" style=" margin-left: 10px; margin-right: 2px;" value="<!--{$aExams.fullscore}-->" class="required number isPositive </tr>如上所⽰，加粗的地⽅就是使⽤的⽅法，⼀共⽤了三个验证规则，⼀个是必须，⼀个是数字，⼀个是⾃定义验证规则。
jquery.validate.js的Validate表单验证
jquery.validate.js的Validate表单验证validate⼀、 validate的使⽤步骤1. 引⼊jquery.min.js2. 引⼊ jquery.validate.js3. 页⾯加载后对表单进⾏验证 $("#表单id名").validate({}）4. 在validate中的rules中编写验证规则（格式如下）字段的name属性:“校验器”（tisps:⼀个输⼊框只有⼀个校验器的时候使⽤）字段的name属性:{校验器:值,校验器:值}(tips:输⼊框需要有多个校验器的时候使⽤)5. 在validate中的messages中编写提⽰信息(tips格式与rules相对应)6. 在validate中的submitHandler中编写验证通过执⾏的内容图⽰如下：案例代码如下<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript" src="scripts/common/jquery.min.js"></script><script type="text/javascript" src="scripts/common/jquery.validate.js"></script<script type="text/javascript">$("#zhuce").validate({rules:{regist_username:{required:true/* remote:{type: "post",url: url,data:{userName:function () {return $("regist_username").val();}}}⽤ajax判断数据库中⽤户名是否存在*/},regist_password:{required:true,minlength:6},final_password:{equalTo:"#regist_password"}},messages:{regist_username:{required:"⽤户名不能为空"},regist_password:{required:"密码不能为空",minlength:"密码最⼩的长度为6"},final_password:{equalTo:"两次密码不⼀致"}},submitHandler: function () {//验证通过后进⾏注册register();}})</script></head><body><form id="zhuce"><dl><dt><div class='header'><h3>注 册</h3></div></dt><dt></dt><dt><div class='letter'><label for="regist_username">⽤户名: </label><input type="text" name="regist_username" id="regist_username" tabindex='5'/></div></dt><dt><div class='letter'>昵 称: <input type="text" name="nickname" id="nickname" tabindex='6'/></div></dt><dt><div class='letter'><label for="regist_password"> 密 码: </label><input type="password" name="regist_password" id="regist_password" tabindex='7'/></div></dt><dt><div class='password'><label for="final_password"> 确认密码: </label><input type="password" name="final_password" id="final_password" tabindex='8'/></div></dt><dt><div><input type="submit" name="" id="regist_button" value=' 注 册 ' tabindex='9'/> <input type="button" name="" id="back" value=' 返 回 ' tabindex='10'/></div></dt></dl></form></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182默认校验规则序号校验类型取值描述1required true&false必须填写的字段2email“@”&“email”必须输⼊正确格式的电⼦邮件3remote url路径使⽤ajax进⾏验证4date数字正确格式⽇期 tips:ie6有bug5dateISO字符串正确格式的⽇期例如：2018-11-28，2018/11/28 tips:只验证格式，不验证有效性6number true&false合法的数字7digits true&false整数8creditcard true&false合法的信⽤卡号9equalTo JQuery表达式（eg:"#regist_password"）输⼊值必须和 #regist_password相同。
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");。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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，所有的检验规则都写在这个参数里面.。