jQuery验证表单验证深入学习

之前一篇文章介绍了jQuery验证表单验证入门的基础知识，详细内容参见《jQuery Validate表单验证入门学习》 ,今天这篇文章深入学习jQuery验证表单验证，以下就是文章的全部内容：

1、用其他方式替代默认的使服从

$().ready(function(){ $(' # signing form ')).验证({ Submit handler :函数(表单){ alert(' Submit ')))；形式。submit()；} });});使用创建交互式、快速动态网页应用的网页开发技术方式

$('.选择器')。验证({ submitHandler:函数（窗体){ $(窗体))。Ajax Submit()；} }) 可以设置生效的默认值，写法如下：

$ .验证器。setdefaults({ Submit handler :函数（窗体){ alert(' submit！');形式。submit()；}});如果想提交表单，需要使用form.submit()，而不要使用$(表单)。提交().2、调试，只验证不提交表单如果这个参数为没错，那么表单不会提交，只进行检查，调试时十分方便。

$().ready(function(){ $(' # signing form ')).验证({ debug 3360 true })；});如果一个页面中有多个表单都想设置成为调试，则使用：

$ .验证器。setdefaults({ debug 3360 true })3、忽略：忽略某些元素不验证忽略： ' .忽略'4 ',更改错误信息显示的位置错误放置：回调指明错误放置的位置，默认情况是：错误。appendto(元素。parent())；即把错误信息放在验证的元素后面。

错误位置：函数（错误，元素){错误。appendo(元素。parent())；}实例

tr TD类=' label ' label id=' lfirst Name ' for=' first Name ' first Name/label/TD TD TD类=' field '输入id=' first Name ' Name=' first Name ' type=' text ' value=' maxlength=' 100 '/TD TD TD TD类=' status '/TD/trtr TD style=' padding-right 3360 5px；输入id=' dateformat _ eu ' name=' dateformat ' type=' radio ' value=' 0 '/label id=' ldateformat _ eu ' for=' dateformat _ eu ' 14/02/07/label/TD style=' padding-left : 5px；输入id=' dateformat _ am ' name=' dateformat ' type=' radio ' value=' 1 '/label id=' ldateformat _ am ' for=' dateformat _ am ' 02/14/07/label/TD/trtr TD class=' label '/TD TD TD class=' field ' col span=' 2 ' div id=' termswrap ' input id=' Terms ' type=' checkbox ' name=' Terms '/label id=' lters ' for=' Terms '我已阅读并接受条款/label/div/TD/trerrorplacement :函数（错误，元素){ if (element.is(':radio '))错误。appendo(元素。parent().下一个()。next())；else if(元素。是(' :复选框')错误。appendo(元素。next())；否则错误。appendo(元素。parent().next())；}代码的作用是：一般情况下把错误信息显示在td class='status'/td中，如果是收音机则显示在td/td中，如果是检验盒则显示在内容的后面。参数类型描述默认值错误类别字符串指定错误提示的钢性铸铁类名，可以自定义错误提示的样式"错误" errorElementString用什么标签标记错误，默认是标签，可以改成嗯。标签"错误容器选举人"显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大错误容器： ' #消息框1,#消息框2 '错误标签容器选择器把错误信息统一放在一个容器里面包装字符串用什么标签再把上边的错误元素包起来。一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏errorContainer: 'div.error '，错误label container : $(' # signing form div。错误')，wrapper: 'li'5，更改错误信息显示的样式设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css，专门用于维护校验文件的样式。

input.error { border: 1px纯红；} label . error { background : URL('。/demo/images/unchecked . gif’)no-repeat 0px 0px；左填充left: 16pxpadding-bottom : 2px；font-weight:粗体；color: # EA5200} label . checked { background : URL('。/demo/images/checked . gif ')no-repeat 0px 0px；}6.每个字段都通过执行函数成功来验证：字符串、回调。如果要验证的元素通过验证，它将被视为css类或函数。

success:函数(标签){ //设置为IE label.html(')的文本。addClass('选中')；//label.addClass('有效')。文本('好的！')}向验证元素添加“valid”，并在CSS中定义stylelabel.valid {}/style。成功： '有效' 7。修改验证的触发模式虽然下面是布尔值，但建议您不要随意添加，除非您想将其更改为false。提交时触发方法类型描述默认值onsubmitBoolean验证。设置为false以使用其他方法进行验证。当trueonfocusoutBoolean失去焦点时进行身份验证(不包括复选框/单选按钮)。TrueonkeyupBoolean在keyup进行验证。当单击复选框和单选按钮时，TrueonclickBoolean验证。TruefocusInvalidBoolean布尔在提交表单后，未通过验证的表单(第一个未通过验证或在提交前获得焦点的表单)将获得焦点。如果为true，当验证失败的元素获得焦点时，错误提示将被删除。避免与focusInvalid一起使用。错误的

//重置表单$()。ready(function(){ var validator=$(' # sign form '))。验证({submitHandler:函数(表单){ alert(' Submit '))；form . submit()；} });$('#reset ')。单击(function(){ validator . reset form()；});});8.异步身份验证远程：URL由ajax进行身份验证。默认情况下，当前已验证的值将被提交给远程地址。如果需要提交其他值，可以使用数据选项。

: ' check-email . PHP ' remote 3360 { URL : ' check-email . PHP '，//后台处理程序type: 'post '，///数据发送方法dataType: 'json '，//接受数据格式data: {//要传输的数据是username : function(){ return $(' # username ')。val()；}}}远程地址只能输出‘真’或‘假’，不允许其他输出。9.添加自定义验证添加方法：名称、方法、消息自定义验证方法。

//汉字是两个字节jquery . validator . addmethod(' byteranglength '，function (value，element，param){ varlength=value . length；for(var I=0；I值.长度；I){ if(value . charcodeat(I)127){ length；} }返回this . optional(element)| |(length=param[0]length=param[1])；}，$.validator.format('请确保输入值在{0}到{1}个字节之间(一个汉字等于2个字节)')；//邮政编码验证jquery.validator.addmethod('是邮政编码'，函数(值，元素){ vartel=/[0-9]{ 6 } $/；返回this . optional(element)| |(tel . test(value))；}、“请正确填写您的邮政编码”)；注意：将其添加到附加的-methods.js文件或jquery.validate.js文件中。这些建议通常写在文件additional-methods.js中.注意：在messages_cn.js文件中添加：isZipCode: '仅包括中文字符、英文字母、数字和下划线'。在调用之前添加对文件additional-methods.js的引用。10.验证无线电，复选框和选择。要求无线电意味着必须选择一个。

输入类型='radio' id='性别_男性'值='m '名称='性别class=' {必需的d : true } '/输入类型='radio' id='性别_女性'值='f '名称='性别'/复选框的需要表示必须选中输入类型=' checkbox ' class=' checkbox ' id=' agree ' name=' agree ' class=' {必需的d : true } '/checkbox的最小长度表示必须选中的最小个数，最大长度表示最大的选中个数，rangelength:[2，3]表示选中个数区间输入类型=' checkbox ' class=' checkbox ' id=' spam _ email '值='电子邮件'名称=' spam[]' class=' {必需的d : true，最小长度：2 } '/输入类型=' checkbox ' class=' checkbox ' id=' spam _ phone '值='电话'名称=' spam[]'/输入类型=' checkbox ' class=' checkbox ' id=' spam _ mail '值='邮件'名称=' spam[]/选择的需要表示选中的价值不能为空选择id='丛林'名称='丛林'标题='请选择一些东西！ class=' { required:true } '选项值=' '/选项值=' 1 ' Buga/选项值=' 2 ' Baga/选项值=' 3 ' Oi/选项/selectselect的最小长度表示选中的最小个数（可多选的选择),最大长度表示最大的选中个数，rangelength:[2，3]表示选中个数区间选择id='水果'名称='水果'标题='请至少选择两种水果class=' { required:true，最小长度：2 } ' multiple=' multiple '选项值='b '香蕉/选项值='a '苹果/选项值='p '桃子/选项值='t '海龟/选项/选择附表：内置验证方式：

本文已被整理到了《jquery表单验证大全》 ,欢迎大家学习阅读。

以上就是针对jQuery验证表单验证的深入学习，希望对大家的学习有所帮助。