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="" 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='&nbsp注&nbsp册&nbsp' tabindex='9'/> <input type="button" name="" id="back" value='&nbsp返&nbsp回&nbsp' 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");。

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正整数数字校验正则表达式

jquery正整数数字校验正则表达式限制⽤户输⼊的内容可以有如下做法：$("#id").keyup(fucntion(){//当键盘按下之后⽴即校验，并替换当前操作框中的内容var value = $(this).val();$(this).val(value.replace(reg,replace_data));});最常见的就是限制⽤户只能录⼊数字var reg = new RegExp("[^0-9]","g");[^0-9]表⽰⾮0-9之间的数字，g表⽰全局匹配，i表⽰不匹配⼤⼩写注：[^x]表⽰匹配除了x以外的任意字符，[^aeiou]表⽰匹配除了aeiou之外的任意字符另⼀种⽅法为穷举法var reg = new RegExp("[a-zA-Z\u4e00-\u9fa5,.!?()，。

．.；;？、]","ig");⽤这种⽅法的话，RegExp中的内容就要尽可能地多列举你不希望⽤户能输⼊的字符，其中\u4e00-\u9fa5表⽰中⽂字符，ig表⽰不区分⼤⼩写全局匹配当你输⼊数字时，不希望⽤户输⼊的数字为"01"、"001"诸如此类，则可以做如下：if(rate.length > 1){var reg = new RegExp("^[0]*","g");var num = rate.replace(reg,"");$(this).val(num);}^[0]*表⽰以0为起始，^为起始符，*为重复零次或多次注：这个⽅法我始终觉得不是最优的，不过暂时也只能想到这么做，如果有更优的做法，欢迎分享，谢谢以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

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的validator验证，以及添加自定义验证规则。

jQuery的validator验证，以及添加⾃定义验证规则。

jquery密码验证规则

在jQuery中，密码验证通常涉及前端验证，以防止用户提交无效或弱密码。

以下是一些常见的密码验证规则，可以在jQuery中实现：1.密码长度：密码长度应至少为8位，建议不超过16位。

可以使用以下代码来验证密码长度：javascript复制代码if ($("#password").val().length < 8 ||$("#password").val().length > 16) {// 密码长度不符合要求}2.包含数字和字母：密码应包含至少一个数字和一个大写字母。

可以使用正则表达式来验证密码是否包含数字和字母：javascript复制代码var password = $("#password").val();if (!/[\dA-Z]/.test(password)) {// 密码不包含数字或大写字母}3.不包含特殊字符：密码不应包含特殊字符，如！@＃$％^＆*等。

可以使用正则表达式来验证密码是否包含特殊字符：javascript复制代码var password = $("#password").val();if (/\W|_/.test(password)) {// 密码包含特殊字符}4.不与用户名相同：密码不应与用户名相同。

可以使用以下代码来验证密码是否与用户名相同：javascript复制代码var password = $("#password").val();var username = $("#username").val();if (password == username) {// 密码与用户名相同}这些规则可以根据需要进行组合和调整。

请注意，这只是前端验证，后端也应进行相应的验证以确保安全性。

JQueryvalidate验证规则

JQueryvalidate验证规则//定义中⽂消息var cnmsg = {required: “必选字段”,remote: “请修正该字段”,email: “请输⼊正确格式的电⼦邮件”,url: “请输⼊合法的⽹址”,date: “请输⼊合法的⽇期”,dateISO: “请输⼊合法的⽇期 (ISO).”,number: “请输⼊合法的数字”,digits: “只能输⼊整数”,creditcard: “请输⼊合法的信⽤卡号”,equalTo: “请再次输⼊相同的值”,accept: “请输⼊拥有合法后缀名的字符串”,maxlength: .format(“请输⼊⼀个长度最多是 {0} 的字符串”),minlength: .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.” 使⽤ajax⽅法调⽤check.验证输⼊值(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 0px0px;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}$/; //电话号码格式010-********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 = newArray(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1); var parityBit=newArray(“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) returnfalsereturn 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) returnfalseif (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}!”));。

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实现验证码功能

jQuery实现验证码功能效果图：代码如下：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#code{width:80px;height:30px;font-size:20px;font-family:Arial;font-style:italic;font-weight:bold;border:0;letter-spacing:2px;color:blue;}</style></head><body><div><input type = "text" id = "input"/><input type = "button" id="code" /><input type = "button" value = "验证" id="check"/></div><script type="text/javascript" src="/jquery/2.0.0/jquery.js"></script><script type="text/javascript">function change(){code=$("#code");// 验证码组成库var arrays=new Array('1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');codes='';// 重新初始化验证码for(var i = 0; i<4; i++){// 随机获取⼀个数组的下标var r = parseInt(Math.random()*arrays.length);codes += arrays[r];}// 验证码添加到input⾥code.val(codes);}change();code.click(change);//单击验证$("#check").click(function(){var inputCode = $("#input").val().toUpperCase(); //取得输⼊的验证码并转化为⼤写console.log(inputCode);if(inputCode.length == 0) { //若输⼊的验证码长度为0alert("请输⼊验证码！"); //则弹出请输⼊验证码}else if(inputCode!=codes.toUpperCase()) { //若输⼊的验证码与产⽣的验证码不⼀致时alert("验证码输⼊错误!请重新输⼊"); //则弹出验证码输⼊错误change();//刷新验证码$("#input").val("");//清空⽂本框}else { //输⼊正确时alert("正确"); //弹出^-^}});</script></body></html>以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

详解jqueryvalidate实现表单验证（正则表达式）

详解jqueryvalidate实现表单验证（正则表达式）⼀、⽬的为了更好地实现⼈机交互，使⽤jQuery封装库中的validate插件，在⽤户填写表单时，可以快速地对⽤户填写的数据进⾏验证，并做出反馈。

⼆、validate插件简介validate()是插件的核⼼⽅法，定义了基本的校验规则和⼀些有⽤的配置项。

rule:设置表单的验证规则；messages:设置表单不符合验证规则的提⽰信息；debug:如果这个参数为true,那么表单还会提交，只进⾏检查，调试时⼗分⽅便。

required:必填minlength:最⼩长度maxlength:最⼤长度rangelength:长度范围，以数组呈现[2，10]，表⽰表单输⼊长度为2到10位remote:可以通过发现GET或者POST请求进⾏远程验证，与Ajax的验证进⾏⽐较。

就是通过ajax实现的｛url:type:默认为GET请求data:发送的数据｝发送GET请求例⼦：check:{required:true,remote:{url:"__CONTROLLER__/check?check="+$("#icode").val//__CONTROLLER__表⽰当前控制器}}基本的校验规则序号规则描述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必须输⼊整数。

利用jquery实现验证输入的是否是数字、小数，包含保留几位小数

利⽤jquery实现验证输⼊的是否是数字、⼩数，包含保留⼏位⼩数1、验证⽅法 validationNumber(e, num) e代表标签对象，num代表保留⼩数位数function validationNumber(e, num) {var regu = /^[0-9]+\.?[0-9]*$/;if (e.value != "") {if (!regu.test(e.value)) {alert("请输⼊正确的数字");e.value = e.value.substring(0, e.value.length - 1);e.focus();} else {if (num == 0) {if (e.value.indexOf('.') > -1) {e.value = e.value.substring(0, e.value.length - 1);e.focus();}}if (e.value.indexOf('.') > -1) {if (e.value.split('.')[1].length > num) {e.value = e.value.substring(0, e.value.length - 1);e.focus();}}}}}2、验证整数<asp:TextBox ID="txtNg" name="txtNg" runat="server" Height="16px" Width="98px" Font-Size="9pt"CssClass="EditTextBox" onpropertychange="validationNumber(this,0)"></asp:TextBox>3、保留⼀位⼩数<asp:TextBox ID="txtChglinecost" name="txtChglinecost" runat="server" Height="16px" Width="98px" Font-Size="9pt"CssClass="EditTextBox" onpropertychange="validationNumber(this,1)"></asp:TextBox>4、保留两位⼩数<asp:TextBox ID="txtStdyr" name="txtStdyr" runat="server" Height="16px" Width="98px" Font-Size="9pt"CssClass="EditTextBox" onpropertychange="validationNumber(this,2)"></asp:TextBox>5、保留三位⼩数只需要把 validationNumber(this,3) ⽅法中的第⼆个参数改为3即可。

jquery正则表达式验证：验证是否包含中文，字母，数字

jquery正则表达式验证：验证是否包含中⽂，字母，数字需求说明：前端页⾯使⽤正则表达式验证输⼊的数据是否包含中⽂，字母，数字。

代码说明：这⾥只介绍正则表达式，其他部分的代码不做介绍。

如果有其他需要⾃⾏修改即可。

步骤⼀：建⽴⼀个页⾯可以是html、jsp等，引⼊jquery-3.2.1.min.js（其他版本亦可）。

步骤⼆：编写正则表达式。

代码部分如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.min.js"></script></head><body></body><script>//这⾥默认页⾯加载时验证输⼊数据$(function () {var value="1SSS-23测试";if(isChinese(value)){console.log("参数:符合验证要求");}else{console.log("参数: 不符合验证要求");}})//验证是否包含中⽂，字母，数字@function isChinese(c) {var specialChar = "~!￥！…@#$%^&*() （）_+{}:\"<|、：>?-=[]？【】《》？：“『』;',./'vwxyz";//var specialChar = "^[a-z0-9A-Z\u4e00-\u9fa5]+$";var index = specialChar.indexOf(c);if (index > -1) {return false;} else {var re = /^([A-Za-z]|[\u4E00-\u9FA5]|[0-9])+$/;return re.test(c);}}</script></html>。