jquery中validate与form插件提交的方式小结


Posted in Javascript onMarch 26, 2016

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

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

方式二:是通过jquery.form的beforeSubmit,即在提交表单前执行的回调函数,这个函数如果返回true,则提交表单,如果返回false,则终止提交表单。根据jquery.validate插件的valid()方法,就可以通过jquery.form提交表单时来对表单进行验证。

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

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

载入CSS样式文件

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

CSS样式文件内容

input{
 height:25px;
 line-height:25px;
 padding-left:4px;
}

span.checked{
 padding: 0px 5px 0px 25px;
 margin-left: 10px;
 margin-top: 0px;
 margin-bottom: 3px;
 height: 25px;
 line-height:25px;
 font-size: 12px;
 white-space: nowrap;
 text-align: left;
 color: #E6594E;
 background: url("images/acion2.png") no-repeat 3px; /* #FCEAE8 */
}
span.unchecked{
 padding: 0px 5px 0px 25px;
 margin-left: 10px;
 margin-top: 0px;
 margin-bottom: 3px;
 height: 23px;
 line-height:23px;
 font-size: 12px;
 border: 1px solid #E6594E;
 white-space: nowrap;
 text-align: left;
 color: #E6594E;
 background: #FCEAE8 url("images/acion.png") no-repeat 3px;
}

载入javascript文件

<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/jquery.form.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/jquery.validate.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/localization/messages_tw.js"></script>

HTML内容

<body><span id="result"></span>
<form id='commentForm'>
 <fieldset>
 <legend>jquery.validate+jquery.form提交的三种方式</legend>
  <p>
   <label for='cusername'>姓名</label><em>*</em>
   <input id='cusername' name='username' size='25' />
  </p>
  <p>
   <label for='cemail'>电子邮件</label><em>*</em>
   <input id='cemail' name='email' size='25' />
  </p>
  <p>
   <input class='submit' type='submit' value='提交'>
  </p>
 </fieldset>
</form>
</body>

jquery.validate+jquery.form提交方式1的javascript内容

<script language="javascript">
function showResponse(responseText,statusText) {
 if(statusText=='success'){
  $("#result").html(responseText);
 }
}

$(document).ready(function(){
 $('#commentForm').validate({
  focusCleanup:true,focusInvalid:false,
  errorClass: "unchecked",
  validClass: "checked",
  errorElement: "span",
  submitHandler:function(form){
   $(form).ajaxSubmit({
    type:"post",
    url:"test_save.php?time="+ (new Date()).getTime(),
    //beforeSubmit: showRequest,
    success: showResponse
   });
  },
  errorPlacement:function(error,element){
   var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
   if(s!=null){
    s.remove();
   }
   error.appendTo(element.parent());
  },
  success: function(label) {
   //label.addClass("valid").text("Ok!")
   label.removeClass("unchecked").addClass("checked");
  },
  rules:{
   username:{required:true,minlength:3},
   email:{
    required:true
   }
  }
 });
});
</script>

jquery.validate+jquery.form提交方式2的javascript内容

<script language="javascript">
function showResponse(responseText,statusText) {
 if(statusText=='success'){
  $("#result").html(responseText);
 }
}

function showRequest(formData,jqForm,options){
 return $("#commentForm").valid();
}

$(document).ready(function(){
 $('#commentForm').submit(function(){
  $(this).ajaxSubmit({
   type:"post",
   url:"test_save.php?time="+ (new Date()).getTime(),
   beforeSubmit:showRequest,
   success:showResponse
  });
  return false; //此处必须返回false,阻止常规的form提交
 });

 $('#commentForm').validate({
  focusCleanup:true,focusInvalid:false,
  errorClass: "unchecked",
  validClass: "checked",
  errorElement: "span",
  errorPlacement:function(error,element){
   var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
   if(s!=null){
    s.remove();
   }
   error.appendTo(element.parent());
  },
  success: function(label) {
   //label.addClass("valid").text("Ok!")
   label.removeClass("unchecked").addClass("checked");
  },
  rules:{
   username:{required:true,minlength:3},
   email:{
    required:true
   }
  }
 });
});
</script>

jquery.validate+jquery.form提交方式3的javascript内容

<script language="javascript">
 var options={
  focusCleanup:true,focusInvalid:false,
  errorClass: "unchecked",
  validClass: "checked",
  errorElement: "span",
  errorPlacement:function(error,element){
   var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
   if(s!=null){
    s.remove();
   }
   error.appendTo(element.parent());
  },
  success: function(label) {
   //label.addClass("valid").text("Ok!")
   label.removeClass("unchecked").addClass("checked");
  },
  rules:{
   username:{required:true,minlength:3},
   email:{
    required:true
   }
  }
 };

function showResponse(responseText,statusText) {
 if(statusText=='success'){
  $("#result").html(responseText);
 }
}

function showRequest(formData,jqForm,options){
 return $("#commentForm").valid();
}

$(document).ready(function(){
 validator=$('#commentForm').validate(options);
 $("#reset").click(function(){
  validator.resetForm();
 });

 $("button").click(function(){
  validator.form();
 });

 $('#commentForm').submit(function(){
  $(this).ajaxSubmit({
   type:"post",
   url:"test_save.php?time="+ (new Date()).getTime(),
   beforeSubmit:showRequest,
   success:showResponse
  });
  return false; //此处必须返回false,阻止常规的form提交
 });
});
</script>

DEMO源码:下载

一些问题

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

jquery中validate与form插件提交的方式小结

不使用<!DOCTYPE html>,而使用<html>时没有这样的问题,一切正常。不过,现在的问题是,为什么加上<!DOCTYPE html>会产生这样的问题?而且,做为前端来说,加上<!DOCTYPE html>是必须的。

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

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

errorPlacement:function(error,element){
 alert(element.parent().html());
 var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
 if(s!=null){
  s.remove();
 }
 error.appendTo(element.parent());
},

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

jquery中validate与form插件提交的方式小结

输入三个字符,验证成功后,得到如下图所示:

jquery中validate与form插件提交的方式小结

继续输入更多字符,得到如下图所示

jquery中validate与form插件提交的方式小结

这就说明了以下几个问题:

1、不管验证失败还是成功,都会调用errorPlacement:function(...)

2、s.remove()没有起作用。

由于在写这篇文章时使用的是<html>而不是<!DOCTYPE html>,弹出的内容是htmlFor="cusername",而不是for="cusername",如下图所示:

jquery中validate与form插件提交的方式小结

因此,上面的代码中写成如下的方式

var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
 if(s!=null){
  s.remove();
 }

然而在<!DOCTYPE html>下,无法根据htmlFor找到<span generated="true" htmlFor="cusername"></span>,因此这里应该把htmlFor改成for,即

errorPlacement:function(error,element){
 alert(element.parent().html());
 var s=element.parent().find("span[for='" + element.attr("id") + "']");
 if(s!=null){
  s.remove();
 }
 error.appendTo(element.parent());
},

问题似乎解决了。但上面提到,不管验证成功或失败,都会调用errorPlacement:function(...),那可以在这里判断有没有错误,如果有错误,则显示。防止已经验证成功的情况下仍会调用。这样就不会寻找span的for属性值是否为当前控件的name名称了(例子中是for="cusername")。改进的代码如下:

errorPlacement:function(error,element){
 if(error.html()!=''){
  error.appendTo(element.parent());
 }
},

虽然解决问题,但是在chrome、firefox下仍有问题。了解这个问题的现象,可以用firefox或chrome测试一下——焦点离开输入框后,无法验证,只有点击“提交”按钮后才可以验证——这个问题的解决方案目前还没有深入下去。但是有解决的办法是,将上面的jquery1.6.2换成jquery1.3.2或jquery1.4(其它的jquery版本未测试,可能是低于jquery1.6.2的版本都可以)即可解决这个问题。

建议:

1、使用jquery1.3.2版本,这样可以节省很多时间来解决兼容方面的问题。

更多:

本例子中的jquery.validate,解决了remote远程验证只返回true or false的局限。可以返回代码及出错的提示信息,更好的人性化需求。使用方法就在这介绍一下

增加以下函数

function GetRemoteInfo(postUrl,data){
 var remote = {
  type: "POST",
  async: false,
  url: postUrl,
  dataType: "xml",
  data: data,
  dataFilter: function(dataXML) {
   var result = new Object();
   result.Result = jQuery(dataXML).find("Result").text();
   result.Msg = jQuery(dataXML).find("Msg").text();
   //alert(result.Result);
   if (result.Result == "-1") {
    result.Result = false;
    return result;
   }else{
    result.Result = result.Result == "1" ? true : false;
    return result;
   }
  }
 };
 return remote;
}
$(document).ready(function(){
 var dataInfo ={email:function(){return $("#cemail").val();}};
 var remoteInfo = GetRemoteInfo('check-email.php?time='+(new Date()).getTime(),dataInfo);
 $('#commentForm').validate({
  rules:{
   username:{
    required:true,
    minlength:3
   },
   email:{
    required:true,
    remote:remoteInfo
   }
  }
 });
 ....
});

check-email.php返回的内容为xml格式,格式如下

<?php
header("Content-Type:text/xml");
echo '<?'.'xml version="1.0" encoding="utf-8"'.' ?>';
?>
<AjaxClass>
<Msg>用户名格式不正确,用户名必须包含testa,请重新输入!</Msg>
<Result>0</Result>
</AjaxClass>

result值为0,返回的是false,表示验证失败;result值为1,返回的是true,表示验证成功

Javascript 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
详解js闭包
Sep 02 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
Promise静态四兄弟实现示例详解
Jul 07 Javascript
javascript实现方法调用与方法触发小结
Mar 26 #Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 #Javascript
jQuery常用的一些技巧汇总
Mar 26 #Javascript
javascript拖拽应用实例(二)
Mar 25 #Javascript
几种经典排序算法的JS实现方法
Mar 25 #Javascript
javascript拖拽应用实例
Mar 25 #Javascript
JavaScript学习笔记之创建对象
Mar 25 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
js自定义回调函数
2015/12/13 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
在Python中COM口的调用方法
2019/07/03 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
ktv中秋节活动方案
2014/01/30 职场文书
2014年校长工作总结
2014/12/11 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
怎样写家长意见
2015/06/04 职场文书
新郎婚礼致辞
2015/07/27 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
Python语言规范之Pylint的详细用法
2021/06/24 Python