jquery中生效与形式插件提交的方式小结

概述：本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。

方式一：是通过jquery.validate的submitHandler选项，即当表单通过验证时执行回调函数。在这个回调函数中通过jquery.form来提交表单；

方式二：是通过jquery.form的在提交之前，即在提交表单前执行的回调函数，这个函数如果返回没错，则提交表单，如果返回假的，则终止提交表单。根据jquery.validate插件的有效()方法，就可以通过jquery.form提交表单时来对表单进行验证。

方式三：是通过jquery.validate验证表单的生效方法。这个方法的好处是对表单验证的控制更加自由

实例：下面通过三个实例分别阐述上面的三种方式

载入半铸钢钢性铸铁(铸造半钢)样式文件

复制代码代码如下：link rel='样式表type=' text/CSS ' media=' screen ' href=' style。CSS '/

半铸钢钢性铸铁(铸造半钢)样式文件内容

输入{高：25px线高：25 px填充-左侧：4 px} span。已检查{ padd : 0px 5px 0px 25px左边距left: 10px边距-top : 0px；保证金-底部： 3px高度： 25px线高：25 pxfont-size : 12px空白： nowrap文本-左对齐：color : # e 6594 ebackground : URL(' images/ACI on2。png ')无重复3px/* # FCEAE 8 */} span。未选中{ padd : 0px 5px 0px 25px左边距left: 10px边距-top : 0px；保证金-底部： 3px高度： 23px线高：23 pxfont-size : 12pxborder: 1px固体# e 6594 Ewhite-space : nowrap；文本-左对齐：color : # e 6594 ebackground : # FCEAE 8 URL(' images/acion。png ')无重复3px}

载入爪哇岛描述语言文件

脚本语言='JavaScript '类型=' text/JAVAScript ' src=' http : js/Jquery 1。6 .2 .js '/脚本脚本语言='JavaScript '类型=' text/JAVAScript ' src=' http : js/jquery。形式。js '/脚本脚本语言='JavaScript '类型=' text/JAVAScript ' src=' http : js/jquery。验证。js .内容

body span id=' result '/span form id=' comment form '字段集legendjquery。验证jquery。形式提交的三种方式/图例p标签为='cusername '姓名/label em */em input id=' cuser name ' name=' username ' size=' 25 '/p p label for=' cemail '电子邮件/labelem */em input id=' cemail ' name=' email ' size=' 25 '/p p input class=' submit ' type=' submit ' value='提交/p/字段集/表单/正文

jquery.validate jquery.form提交方式一的爪哇岛描述语言内容

脚本语言='javascript '函数showResponse(responseText，statusText){ if(statusText==' success '){ $(' # result ').html(responseText)；}}$(文档)。ready(function(){ $(' # comment form ')).验证({ focusleanup : true，focusInvalid:false，errorClass: '未选中，validClass: '选中，ErrorElement :“span”，提交处理程序：函数(表单){ $(表单).ajaxSubmit({ type:'post '，url:'test_save.php？时间='(新日期())。getTime()，//beforeSubmit: showRequest，success : show response })；}，errorPlacement:function(错误，元素){ var s=element.parent().find(' span[HTMl FOr='元素。attr(' id ')' ']')；如果！=null){ s . remove()；}错误。appendto(元素。parent())；}，成功：函数（标签){ //label.addClass('有效').文本('好的！)label.removeClass('未选中')。addClass(')选中');}，规则： { username : { required d : true，minlength:3}，电子邮件： { required d : true } })；});/script

jquery.validate jquery.form提交方式2的爪哇岛描述语言内容

脚本语言='javascript '函数showResponse(responseText，statusText){ if(statusText==' success '){ $(' # result ').html(responseText)；} }函数showRequest(formData，jqForm，options){ return $('#commentForm ').valid()；}$(文档)。ready(function(){ $(' # comment form ')).submit(function(){ $(this)).ajaxSubmit({ type:'post '，url:'test_save.php？时间='(新日期())。getTime()，beforeSubmit:showRequest，success : show response })；返回false//此处必须返回假的，阻止常规的形式提交});$('#commentForm ').验证({ focusleanup : true，focusInvalid:false，errorClass: '未选中，validClass: '选中，errorElement: ' span '，errorPlacement:function(错误，元素){ var s=element.parent().find(' span[HTMl FOr='元素。attr(' id ')' ']')；如果！=null){ s . remove()；}错误。appendto(元素。parent())；}，成功：函数（标签){ //label.addClass('有效').文本('好的！)label.removeClass('未选中')。addClass(')选中');}，规则： { username : { required d : true，minlength:3}，电子邮件： { required d : true } })；});/script

jquery.validate jquery.form提交方式3的爪哇岛描述语言内容

脚本语言=' JavaScript ' var options={ focusleanup : true，focusInvalid:false，errorClass: '未选中，validClass: '选中，error element :“span”，错误放置：函数(错误，元素){ var s=element.parent().find(' span[HTMl FOr='元素。attr(' id ')' ']')；如果！=null){ s . remove()；}错误。appendto(元素。parent())；}，成功：函数（标签){ //label.addClass('有效').文本('好的！)label.removeClass('未选中')。addClass(')选中');}，规则： { username : { required d : true，minlength:3}，电子邮件： { required d : true } }函数showResponse(responseText，statusText){ if(statusText==' success '){ $(' # result ').html(responseText)；} }函数showRequest(formData，jqForm，options){ return $('#commentForm ').valid()；}$(文档)。ready(function(){ validator=$(' # comment form ')).验证（选项);$(“# reset”).单击(function(){ validator。重置表单()；});$("按钮")。单击(function(){ validator。form()；});$('#commentForm ').submit(function(){ $(this)).ajaxSubmit({ type:'post '，url:'test_save.php？时间='(新日期())。getTime()，beforeSubmit:showRequest，success : show response })；返回false//此处必须返回假的，阻止常规的形式提交});});/script

演示源码：下载

一些问题

1、其实这个问题在昨天晚上写这篇文章的时候就有发现，即我在超文本标记语言文件头使用！声明文档类型时，输入框及错误信息的样式似乎有些问题。不过今天发现问题并非这么简单，在使用！声明文档类型时，针对"姓名"这个输入框来说——只须达到三个字符就认为通过验证——在输入第一个字符、第二个字符时，错误显示正常，输入第三个字符时，错误显示消失，并显示一个表示验证通过的"逗号"图片。到目前为止，一切似乎都很正常，但如果在继续输入字符，比如输入第四个字符、第五个字符.问题出现了。如下图所示：

不使用！DOCTYPE html，而使用超文本标记语言时没有这样的问题，一切正常。不过，现在的问题是，为什么加上！声明文档类型会产生这样的问题？而且，做为前端来说，加上！声明文档类型是必须的。

这个问题处理的比较纠结，这里罗列一下处理的过程。并且在最后给一个解决方案

首先，是因为昨天在查看错误提示信息，关注一下插入错误信息的代码。我在错误放置中增加了一句：alert(element.parent().html())；

errorPlacement:function(错误，元素){ alert(element.parent().html())；var s=element.parent().find(' span[HTMl FOr='元素。attr(' id ')' ']')；如果！=null){ s . remove()；}错误。appendto(元素。parent())；},

输入第一个字符时，得到如下图所示

输入三个字符，验证成功后，会出现下图：

继续输入更多字符，得到下图。

这解释了以下问题：

1.errorPlacement:function(.)将被调用，而不管验证是否成功。

2.s.remove()不起作用。

因为这篇文章是用html而不是！DOCTYPE html，弹出的内容是htmlFor='cusername '而不是For='cusername '，如下图所示：

因此，上面的代码是以下面的方式编写的。

var s=element.parent()。find(' span[HTMl FOr=' element . attr(' id ')' ']')；如果！=null){ s . remove()；}但是在！在DOCTYPE html下，根据htmlFor找不到span generated=' true ' htmlFor=' c username '/span，所以在这里，HTMlFor应该改为FOr，也就是。

errorPlacement:function(错误，元素){ alert(element.parent()。html())；var s=element.parent()。find(' span[for=' element . attr(' id ')' ']')；如果！=null){ s . remove()；} error . appendto(element . parent())；},

看来问题已经解决了。但是，如上所述，无论验证成功还是失败，errorPlacement:function(.)会被调用，在这里可以判断是否有错误，如果有错误，就会显示出来。即使身份验证成功，也要阻止呼叫。这样，我们就不会发现span的for属性的值是否是当前控件的名称(在示例中为='cusername ')。改进后的代码如下：

errorPlacement:function(错误，元素){ if(error.html()！=' '){ error . appendo(element . parent())；}}，虽然问题解决了，但是chrome和firefox下还是有问题。要了解这个问题的现象，可以用火狐或者chrome测试，离开输入框后无法验证——的焦点，只有点击“提交”按钮后才能验证——这个问题的解决方案还没有深入。但是，解决方案是用jquery1.3.2或jquery1.4替换上面的jquery1.6.2(jquery的其他版本尚未经过测试，可能是低于jquery 1 . 6 . 2的版本)。

建议：

1.使用jquery1.3.2版本1.3.2，可以节省大量时间来解决兼容性问题。

更多：

在这个例子中，jquery.validate解决了远程验证只返回true或false的限制。它可以返回代码和错误的提示信息，从而更好地人性化需求。这里介绍如何使用。

添加以下功能。

函数getremote info(postal，data){ var remote={ type : ' POST '，async: false，url: postUrl，dataType: ' xml '，data: data，dataFilter:函数(dataXML){ var result=new Object()；结果。Result=jQuery(dataXML)。查找(“结果”)。text()；结果。Msg=jQuery(dataXML)。查找(' Msg ')。text()；//alert(结果。结果)；if(结果。结果=='-1') {结果。结果=假；返回结果；}else{ result。结果=结果。结果=='1 '？真：假；返回结果；} } };远程返回；}

$(文档)。ready(function(){ var DataInfo={ email : function(){ return $(' # cemail '))。val()；}};var remote info=getremote info(' check-email . PHP？时间='(新日期())。getTime()，dataInfo)；$('#commentForm ')。验证({ rule : { username : { required d : tree，minlength:3 }，email : { required d : tree，remote : remote info } })；});check-email.php返回的内容是xml格式，如下所示。

？phpheader(' Content-type : text/XML ')；回声？xml版本=“1.0”编码=“utf-8”。' ?'；AjaxClassMsg用户名的格式不正确。用户名必须包含testa。请重新进入！/MsgResult0/Result/AjaxClass

结果的值为0，返回false，表示验证失败；结果值为1并返回true，表示验证成功。