Jquery验证非常简单。以下是三种常用的方法：

第一种方式；也是标准方式；

首先介绍jquery插件和jquery验证插件：

第一步：引入插件复制代码如下： script Type=' text/JAVAScript ' src=' http : js/jquery-1 . 6 . 1 . min . js '/script Type=' text/JAVAScript ' src=' http 3360 js/jquery . validate . js '/script script Type=' text/JAVAScript ' src=' http 3360 js/jquery . metadata '/js。}/style步骤3:添加错误处理方法；

Jquery验证，需要具备：

1:定义验证方法2:添加验证规则

下面贴了一些验证的小例子，一目了然。

先看效果图：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312/脚本类型=' text/JavaScript ' src=' http : js/jquery-1。6 .1 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。验证。js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。元数据。js '/脚本脚本类型=' text/JavaScript}/style/head脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $('#clickme ')).点击（函数(){ alert(' Hello World ')；});$('#frm ').validate({规则s : {用户名： {必需d : true，minlength: 4，maxlength: 20，byteMaxLength:20，valiEnglish:true }，邮政编码33: {邮政deval : true }，编号： { bytemaxlength 3:5，numFormat:5 }，标识符3333333333336)请输入用户名4 - 20个英文字符，minlength:美元。格式('继续键入，至少需要{0}个字符!')，maxlength:美元.格式('哇!'最多允许{0}个字符！)}，number: { numFormat: $ .格式('请输入{0}数字') } } });jquery。验证器。addmethod('字节长度'，函数（值，元素，参数){ var length=value . length for(var I=0；我值。长度；I){ if(value。charcodeat(I)127){长度；} }返回这个。可选(element)| |(length=param)；}，$.validator.format('不能超过{0}个字节（一个中文字算2个字节)'));jquery。验证器。addmethod(' numformat '，函数(值，元素，参数){返回此。可选(元素)| | /^d*$/.测试（值);}//，$.validator.format('请输入数字{0}位以内'));//number(9，3)jquery。验证器。addmethod(' numformat 63 '，函数(值，元素){ return this。可选(元素)| | /^[0-9]{1,6}(.d{1，3})$/.测试（值);}，$.validator.format('请输入合法数字，精度格式123456.0'));jquery。验证器。addmethod(' post deval '，function(value，element){ return this。可选(元素)| | /^[0-9]d{5}(？d)$/.测试（值);}，$.validator.format('请输入合法的邮编'));jquery。验证器。addmethod(' number and lettersval '，function(value，element){ return this。可选(元素)| | /^[a-za-z0-9]$/。测试（值);}，$.validator.format('请输入字母或数字'));jquery。验证器。addmethod(' sfzhvalidate '，函数（值，元素){返回this.optional(元素)|| /^(d{14}|d{17})(d|[xX])$/.测试（值);}，$.validator.format('请输入合法身份证号'));jquery。验证器。addmethod(' vali English '，function(value，element){ return this。可选(元素)| | /^[a-za-z]* $/.测试（值);}，$.validator.format('请输入字母或者空格'));});/script正文表单id=' frm ' name=' frm ' method=' post ' action=' label '用户名：输入类型='文本'名称='用户名id='用户名'/标签p标签邮编：标签/标签/标签标签输入类型='text '名称='邮编id='邮编/br//label /p plabel数字：输入类型=' text ' name=' number ' id=' number '/label br/label身份证号：输入类型=' text ' name=' identifier ' id=' identifier '/标签标签输入类型=' button ' name=' click me ' id=' click me ' value=' click me '/label/p/form/body/html这是一个完整的验证示例，关于引入的代码已经上传，可以点击下载下面讲解其中的重点方法：

jquery . validator . addmethod(' BytemaxLength '，函数(值，元素，参数){ var length=value.lengthfor(var I=0；I值.长度；I){ if(value . charcodeat(I)127){ length；} }返回this . optional(element)| |(length=param)；}，$.validator.format('不能超过{0}个字节(一个汉字算2个字节)')；jQuery.validator.addMethod()方法有三个参数。第一个参数：“byteMaxLength”是定义方法名，必须保证它是唯一的，并且有一个标识符标志。第二个参数是下面的回调函数：

函数(值、元素、参数){ var length=value.lengthfor(var I=0；I值.长度；I){ if(value . charcodeat(I)127){ length；} }返回this . optional(element)| |(length=param)；}回调函数有三个参数：

第一个是value，它是当前已验证元素的值。第二：元素是当前已验证的元素。第三个是传入的参数，例如，min : 5，即5。例如，当调用此方法时，bytemaxlength: 10，其中10是传入的参数。

这个方法的方法名是：如上的byteMaxLength回调函数。回调函数的作用是验证输入了多少字节。一个汉字表示字符为0-127的ASCII码，其中一个返回：return this.optional(元素)。这个函数调用意味着验证表单的输入值何时不为空。当字段为空，也就是元素的值为空时，this.optional(element)=true，也就是说该字段不是必输项，不填则通过校验。如果元素的值不为空，this.optional(element)=false，需要根据|后的校验来判断是真还是假。总而言之，这个. optional(元素)是为了显示当前验证的字段不是必需的。

第三个参数如下：

复制代码如下：$.validator.format('不能超过{0}个字节(一个汉字等于2个字节)')

第三个参数可以直接是消息，是验证的提示信息。为了显示函数的验证信息，也可以通过创建函数jQuery.validator.format(value)来显示此参数，其中{0}表示此方法的参数。如果调用方法，例如：字节以上的输入： 10，不能超过10个字节(一个汉字算两个字节)

让我们看看这段代码：

$('#frm ')。validate({ rule s : { username : { required d : true，minlength: 4，maxlength: 20，byteMaxLength:20，valiEnglish:true }，post code 3: { post deval : true }，number : { bytemaxlength 3:5，numFormat:5 }，Identifier 333: { sfzhvalidate格式('继续键入，至少需要{0}个字符！')，maxlength: $。格式('哇！'最多允许{0}个字符！')}，编号： {numformat: $。格式('请输入{0}个数字')} })；首先，这是一个方法调用

复制代码如下： $ ('# frm ')。验证([选项])

要验证所选表单，方法的参数是可选的，并且可以输入0或键/值对。此方法用于处理由提交、聚焦、键控、模糊、点击等触发的验证。对象是整个表单的元素或单个元素。规则和消息用于定义已验证的元素。使用errorclass、errorelement、wrapper、errorlablcontainer、errorcontainer、showerrors、success、errorplacement、highlight、unhighlight和ignoretitle来控制非法元素的错误信息显示。

查看validate方法规则()；

返回第一个选定元素的验证规则。有几种方法可以定义验证规则。

Rules方法定义基于id的身份验证，

复制代码如下：用户名： {必选：真，最小长度3360 4，最大长度3360 20，字节最大长度336020，瓦利英语：真}

如上：username为id名称，{}为定义的认证方式，即该id认证需要哪些方式，方式名称为上述方式；

这就是定义。

消息定义：

复制代码如下：用户名： {必填项： '请输入4-20个用户名英文字符'，最小长度： $。格式('继续键入，至少需要{0}个字符！')，maxlength: $。格式('哇！'最多允许{0}个字符！') }

该id中方法验证错误消息。您可以直接输出消息或调用$。format()方法。

以上标准格式如下：复制代码如下： var $ params={ debug : false，rules : {}，messages : { }；$('#frm ')。验证($ params)；在规则{}中定义验证规则的方法。Messages{}定义错误输出。以上是第一种方式：

第二种方式与第一种方式基本相同：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312/脚本类型=' text/JavaScript ' src=' http : js/jquery-1。6 .1 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。验证。js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。元数据。js '/脚本脚本类型=' text/JavaScript}/style/head脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $('#clickme ')).点击（函数(){ alert(' Hello World ')；});jquery。验证器。addmethod('字节长度'，函数（值，元素，参数){ var length=value . length for(var I=0；我值。长度；I){ if(value。charcodeat(I)127){长度；} }返回这个。可选(element)| |(length=param)；}，$.validator.format('不能超过{0}个字节（一个中文字算2个字节)'));jquery。验证器。addmethod(' numformat '，函数(值，元素，参数){返回此。可选(元素)| | /^d*$/.测试（值);}，$.validator.format('请输入数字{0}位以内'));//number(9，3)jquery。验证器。addmethod(' numformat 63 '，函数(值，元素){ return this。可选(元素)| | /^[0-9]{1,6}(.d{1，3})$/.测试（值);}，$.validator.format('请输入合法数字，精度格式123456.0'));jquery。验证器。addmethod(' post deval '，function(value，element){ return this。可选(元素)| | /^[0-9]d{5}(？d)$/.测试（值);}，$.validator.format('请输入合法的邮编'));jquery。验证器。addmethod(' number and lettersval '，function(value，element){ return this。可选(元素)| | /^[a-za-z0-9]$/。测试（值);}，$.validator.format('请输入字母或数字'));jquery。验证器。addmethod(' sfzhvalidate '，函数（值，元素){返回this.optional(元素)|| /^(d{14}|d{17})(d|[xX])$/.测试（值);}，$.validator.format('请输入合法身份证号'));jquery。验证器。addmethod(' vali English '，function(value，element){ return this。可选(元素)| | /^[a-za-z]* $/.测试（值);}，$.validator.format('请输入字母或者空格'));$('#frm ').validate()；check _ infor()；});函数check _ infor(){ $(“# username”).attr('class '，' {byteMaxLength:22，vali English : true } ')；$(' #邮编')。attr('class '，' {byteMaxLength:6，post deval : true } ')；$('#number ').attr('class '，' {byteMaxLength:6，numformat :6 } ')；$(“# identifier”).attr('class '，' { sfzhvalidate : true } ')；}/脚本正文表单id=' frm '名称=' frm '方法=' post '操作=' label '用户名：输入类型='文本'名称='用户名id='用户名'/标签p标签邮编：标签/标签/标签标签输入类型='text '名称='邮编id='邮编/br//label /p plabel数字：输入类型=' text ' name=' number ' id=' number '/label br/label身份证号：输入类型=' text ' name=' identifier ' id=' identifier '/标签标签输入类型=' button ' name=' click me ' id=' click me ' value=' click me '/label/p/form/body/html以上为第二种方式的代码：其中：方法定义和第一种一样：在于调用：复制代码代码如下：函数check _ infor(){ $(' # username ').attr('class '，' {byteMaxLength:22，vali English : true } ')；$(' #邮编')。attr('class '，' {byteMaxLength:6，post deval : true } ')；$('#number ').attr('class '，' {byteMaxLength:6，numformat :6 } ')；$(“# identifier”).attr('class '，' { sfzhvalidate : true } ')；}

其中定义了一个爪哇岛描述语言方法专门用于为形式表单中需要验证的编号进行验证：其中用到了attr()方法：这个方法有很多种参数形式。属性名，值方法属性名为参数名：值为参数值其中下面方法是为编号为用户名的元素的班级属性添加值：复制代码代码如下："{ bytemaxlength :22，valiEnglish:true} "复制代码代码如下： $(“# username”).attr('class '，' {byteMaxLength:22，vali English : true } ')；

这样该编号元素就有了验证。

注意：在自定义的check_infor()调用之前，必须首先调用$('#frm ').valu date()；方法；

第三种方式：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312/脚本类型=' text/JavaScript ' src=' http : js/jquery-1。6 .1 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。验证。js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。元数据。js '/脚本脚本类型=' text/JavaScript}/style/head脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $('#clickme ')).点击（函数(){ alert(' Hello World ')；});jquery。验证器。addmethod('字节长度'，函数（值，元素，参数){ var length=value . length for(var I=0；我值。长度；I){ if(value。charcodeat(I)127){长度；} }返回这个。可选(element)| |(length=param)；}，$.validator.format('不能超过{0}个字节（一个中文字算2个字节)'));jquery。验证器。addmethod(' numformat '，函数(值，元素，参数){返回此。可选(元素)| | /^d*$/.测试（值);}，$.validator.format('请输入数字{0}位以内'));//number(9，3)jquery。验证器。addmethod(' numformat 63 '，函数(值，元素){ return this。可选(元素)| | /^[0-9]{1,6}(.d{1，3})$/.测试（值);}，$.validator.format('请输入合法数字，精度格式123456.0'));jquery。验证器。addmethod(' post deval '，function(value，element){ return this。可选(元素)| | /^[0-9]d{5}(？d)$/.测试（值);}，$.validator.format('请输入合法的邮编'));jquery。验证器。addmethod(' number and lettersval '，function(value，element){ return this。可选(元素)| | /^[a-za-z0-9]$/。测试（值);}，$.validator.format('请输入字母或数字'));jquery。验证器。addmethod(' sfzhvalidate '，函数（值，元素){返回this.optional(元素)|| /^(d{14}|d{17})(d|[xX])$/.测试（值);}，$.validator.format('请输入合法身份证号'));jquery。验证器。addmethod(' vali English '，function(value，element){ return this。可选(元素)| | /^[a-za-z]* $/.测试（值);}，$.validator.format('请输入字母或者空格'));$('#frm ').validate()；$(' #用户名')。规则(' add '，{ required: true，byteMaxLength:20，vali English : true })；$(' #邮编')。规则(' add '，{ post deval : true })；$('#number ').规则(' add '，{ byteMaxLength:5，numformat :5 })；$(“# identifier”).规则(“add”，{ sfzhvalidate : true })；});/script正文表单id=' frm ' name=' frm ' method=' post ' action=' label '用户名：输入类型='文本'名称='用户名id='用户名'/标签p标签邮编：标签/标签/标签标签输入类型='text '名称='邮编id='邮编/br//label /p plabel数字：输入类型=' text ' name=' number ' id=' number '/label br/label身份证号：输入类型=' text ' name=' identifier ' id=' identifier '/标签标签输入类型=' button ' name=' click me ' id=' click me ' value=' click me '/label/p/form/body/html第三种方式与其他两种方式不同的地方就是：

复制代码代码如下： $(“# username”).规则(' add '，{ required: true，byteMaxLength:20，vali English : true })；$(' #邮编')。规则(' add '，{ post deval : true })；$('#number ').规则(' add '，{ byteMaxLength:5，numformat :5 })；$(“# identifier”).规则(“add”，{ sfzhvalidate : true })；

为每一个单独的元素添加验证规则。其中调用了规则('添加，规则)方法：增加验证规则为匹配的元素。注意：$(“form”).验证()方法必须首先被调用。这个规则也能包含一个消息-对象，定义常用的信息。