它是一个优秀的插件，可以验证客户端表单，并提供许多可定制的属性和方法，具有良好的可扩展性。本文解释了这个例子来理解验证的应用。

本例中涉及的验证包括：

用户名：长度、字符验证、重复ajax验证(是否已经存在)。

密码：长度验证，重复密码验证。

邮件：邮件地址验证。

固定电话：中国大陆固定电话号码验证。

手机号：中国大陆手机号验证。

网站：网站网址验证。

日期：标准日期格式验证。

数字：整数，正整数验证，数字范围验证。

身份证：大陆身份证号码验证。

邮政编码：大陆邮政编码验证。

文件：文件类型(后缀)验证，如只上传图片。

Ip: IP地址验证。

验证码：验证码的ajax验证。

用法：

1.准备jquery和jquery.validate插件

脚本类型=' text/JavaScript ' src=' http : js/jquery . js '/script script type=' text/JavaScript ' src=' http 3360 js/jquery . validate . js '/script 2，准备CSS样式

我不会详细说明页面样式。可以自己写风格，也可以参考DEMO的页面源代码。这里要强调的关键样式是显示身份验证信息的样式

label . error { color : # ea 5200；边距-left :4 px；padding:0px 20pxbackground : URL(images/unchecked . gif)no-repeat 2px 0 } label . right { margin-left :4 px；左填充left:20px背景： url(images/checked.gif)无重复2px 0} 3、XHTML

表单id=' my form ' action=' # Method=' post '表格宽度=' 100% '边框=' 0 '单元格间距=' 0 '单元格填充=' 0 ' class=' my table ' tr class=' table _ title ' tdcolspan=' 2 ' jquery。验证表单Authentication/TD/tr tr TD width=' 22% ' align=' right '用户名：/TD TD输入类型=' text ' name=' user ' id=' user ' class=' input required '/p用户名为3-16个字符。可以是数字、字母、下划线和中文/p/TD/tr TD align=' right ' password:/TD TD输入类型=' pass ' name=' pass ' id=' pass ' class=' input required '/p最小长度：6最大长度：16/p/TD/tr TD align=' right '确认密码/TD TD输入类型=' pass ' name=' repass ' class=' input required '/TD/tr/table/form限于空格。本文只截取了示例中的一小部分HTML代码。详细的XHTML代码请参考页面的DEMO源代码。值得一提的是，我已经给标签赋予了一个“必选”的类样式，其功能将在下面提到。

4.应用验证插件

调用验证插件的方法：

$(function(){ varvalidate=$(' # my form '))。验证({ rule s 3360 {//定义验证规则.}，消息：{ //定义提示信息.}}));规则：定义了验证规则，其形式为key:value，其中key是要验证的元素，value可以是字符串或对象。例如，验证用户名的长度，并且不允许它为空：

规则： { user : { required d 3360 true，maxlength336016，minlength33603}，}其实我们可以在XHTML代码中根据需要直接指定input的class属性，不允许为空，所以在JS中不需要重复。相同的验证电子邮件等。直接将输入的类属性设置为email。

消息：定义提示信息。key:value的形式是要验证的元素，值是字符串或函数。验证失败时，会显示提示信息。

消息： { user : { required d : }用户名不能为空！remote:“用户名已经存在，请更改另一个用户名！”},}本例涉及的Validation JS就是根据上述规则编写的，验证插件封装了很多基本的验证方法，如下所示：

Required:true值必须有一个值，并且不能为空

Remote:url可以用来判断用户名是否已经存在，服务器输出true，表示认证通过

最小长度：6最小长度为6

最大长度：16最大长度为16

范围长度：长度范围

范围：[10，20]的值范围为10到20

电子邮件：真实身份验证邮件

Url:true请验证Url地址

日期验证日期格式' yyyy-mm-dd '为true

数字：值只能是一个数字

Accept:'gif|jpg '仅接受带gif或jpg后缀的图片。通常用于验证文件的扩展名

EqualTo:'#pass '等于哪个表单字段值，它通常用于验证重复的密码输入

此外，我还根据项目的实际情况进行了多次扩展验证。验证码在validate-ex.js中，需要在使用前加载。它可以提供以下验证：

用户名：真实用户名只能包含中文字符、英文字母、数字和下划线

IsMobile:true真实手机号码验证

IsPhone:true真实大陆手机号码验证

IsZipCode:true真实邮政编码验证

IsIdCardNo:true真实内地身份证号码验证

Ip:true真实Ip地址验证

以上提供的验证方法在大多数项目中基本满足我们的需求。如有其他特殊验证要求，可进行扩展，如：

jquery . validator . addmethod(' iszipcode '，function(value，element){ var zip=/^[0-9]{6}$/；返回this . optional(element)| |(zip . test(value))；}、“请正确填写您的邮政编码！”);难题解决

1.在项目中，验证用户名是否存在时，发现不支持中文输入验证。我的解决方案是用encodeURIComponent对用户名进行编码，然后后台PHP用urldecode对接受的值进行解码

user : { remote : { URL : ' chk _ user . PHP '，//server verifier type: 'post '，///submission method data : { user 3360 function(){ return encodeuricomponent($(' # user ')。val())；//编码数据}}}}，服务器验证程序chk_user.php的代码：

？PHP $ request=URL decode(trim($ _ POST[' user ']))；us LEEP(150000)；$ users=array(' daimajiaayuan.com '，' jeymii '，' Peter '，' daimajiaayuan ')；$ valid=' trueforeach($ user as $ user){ if(strtolow($ user)=$ request)$ valid=' false '；} echo $有效；我用的服务器程序是PHP，你也可以用ASP，ASP.NET，JAVA等等。此外，为了演示这个示例，用户名数据直接写在服务器上，真正的应用程序是从数据库中获取的用户名数据，以便与接收客户端的数据进行比较。

2.验证复选框和单选控件时，验证信息不会出现在最后一个控件文本后面，而是直接跟在第一个控件后面，这不符合我们的要求。

解决方案是附加以下代码来验证({}):

errorPlacement:函数(错误，元素){ if (element.is(':radio '))错误. appendo(element . parent())；else if(element . is(' : checkbox '))错误. appendo(element . parent())；else if(element . is(' input[name=captcha]'))错误. appendo(element . parent())；else错误. insertAfter(元素)；} 3.重置表单。重置表单表单的原始重置方法

input type=' reset ' value=' reset '/单击“reset”按钮，表单元素将被重置，但运行验证插件后，验证提示不会被重置，即那些提示不会消失。感谢验证提供了重置表单的方法：resetForm()

$(“input 3360 reset”)。单击(function(){ validate . reset form()；});以上就是本文的全部内容，希望大家喜欢。