原文链接：http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html

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

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

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

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

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

载入CSS样式文件

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

CSS样式文件内容

  1. input{
  2.   height:25px;
  3.   line-height:25px;
  4.   padding-left:4px;
  5. }
  6.  
  7. span.checked{
  8.   padding: 0px 5px 0px 25px;
  9.   margin-left: 10px;
  10.   margin-top: 0px;
  11.   margin-bottom: 3px;
  12.   height: 25px;
  13.   line-height:25px;
  14.   font-size: 12px;
  15.   white-space: nowrap;
  16.   text-align: left;
  17.   color: #E6594E;
  18.   background: url("images/acion2.png") no-repeat 3px; /* #FCEAE8 */
  19. }
  20. span.unchecked{
  21.   padding: 0px 5px 0px 25px;
  22.   margin-left: 10px;
  23.   margin-top: 0px;
  24.   margin-bottom: 3px;
  25.   height: 23px;
  26.   line-height:23px;
  27.   font-size: 12px;
  28.   border: 1px solid #E6594E;
  29.   white-space: nowrap;
  30.   text-align: left;
  31.   color: #E6594E;
  32.   background: #FCEAE8 url("images/acion.png") no-repeat 3px;
  33. }

载入javascript文件

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

HTML内容

  1. <body><span id="result"></span>
  2. <form id='commentForm'>
  3.   <fieldset>
  4.   <legend>jquery.validate+jquery.form提交的三种方式</legend>
  5.     <p>
  6.       <label for='cusername'>姓名</label><em>*</em>
  7.       <input id='cusername' name='username' size='25' />
  8.     </p>
  9.     <p>
  10.       <label for='cemail'>电子邮件</label><em>*</em>
  11.       <input id='cemail' name='email' size='25' />
  12.     </p>
  13.     <p>
  14.       <input class='submit' type='submit' value='提交'>
  15.     </p>
  16.   </fieldset>
  17. </form>
  18. </body>

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

  1. <script language="javascript">
  2. function showResponse(responseText,statusText) {
  3.   if(statusText=='success'){
  4.     $("#result").html(responseText);
  5.   }
  6. }
  7.  
  8. $(document).ready(function(){
  9.   $('#commentForm').validate({
  10.     focusCleanup:true,focusInvalid:false,
  11.     errorClass: "unchecked",
  12.     validClass: "checked",
  13.     errorElement: "span",
  14.     submitHandler:function(form){
  15.       $(form).ajaxSubmit({
  16.         type:"post",
  17.         url:"test_save.php?time="+ (new Date()).getTime(),
  18.         //beforeSubmit: showRequest,
  19.         success: showResponse
  20.       });
  21.     },
  22.     errorPlacement:function(error,element){
  23.       var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
  24.       if(s!=null){
  25.         s.remove();
  26.       }
  27.       error.appendTo(element.parent());
  28.     },
  29.     success: function(label) {
  30.       //label.addClass("valid").text("Ok!")
  31.       label.removeClass("unchecked").addClass("checked");
  32.     },
  33.     rules:{
  34.       username:{required:true,minlength:3},
  35.       email:{
  36.         required:true
  37.       }
  38.     }
  39.   });
  40. });
  41. </script>

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

  1. <script language="javascript">
  2. function showResponse(responseText,statusText) {
  3.   if(statusText=='success'){
  4.     $("#result").html(responseText);
  5.   }
  6. }
  7.  
  8. function showRequest(formData,jqForm,options){
  9.   return $("#commentForm").valid();
  10. }
  11.  
  12. $(document).ready(function(){
  13.   $('#commentForm').submit(function(){
  14.     $(this).ajaxSubmit({
  15.       type:"post",
  16.       url:"test_save.php?time="+ (new Date()).getTime(),
  17.       beforeSubmit:showRequest,
  18.       success:showResponse
  19.     });
  20.     return false; //此处必须返回false，阻止常规的form提交
  21.   });
  22.  
  23.   $('#commentForm').validate({
  24.     focusCleanup:true,focusInvalid:false,
  25.     errorClass: "unchecked",
  26.     validClass: "checked",
  27.     errorElement: "span",
  28.     errorPlacement:function(error,element){
  29.       var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
  30.       if(s!=null){
  31.         s.remove();
  32.       }
  33.       error.appendTo(element.parent());
  34.     },
  35.     success: function(label) {
  36.       //label.addClass("valid").text("Ok!")
  37.       label.removeClass("unchecked").addClass("checked");
  38.     },
  39.     rules:{
  40.       username:{required:true,minlength:3},
  41.       email:{
  42.         required:true
  43.       }
  44.     }
  45.   });
  46. });
  47. </script>

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

  1. <script language="javascript">
  2.   var options={
  3.     focusCleanup:true,focusInvalid:false,
  4.     errorClass: "unchecked",
  5.     validClass: "checked",
  6.     errorElement: "span",
  7.     errorPlacement:function(error,element){
  8.       var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
  9.       if(s!=null){
  10.         s.remove();
  11.       }
  12.       error.appendTo(element.parent());
  13.     },
  14.     success: function(label) {
  15.       //label.addClass("valid").text("Ok!")
  16.       label.removeClass("unchecked").addClass("checked");
  17.     },
  18.     rules:{
  19.       username:{required:true,minlength:3},
  20.       email:{
  21.         required:true
  22.       }
  23.     }
  24.   };
  25.  
  26. function showResponse(responseText,statusText) {
  27.   if(statusText=='success'){
  28.     $("#result").html(responseText);
  29.   }
  30. }
  31.  
  32. function showRequest(formData,jqForm,options){
  33.   return $("#commentForm").valid();
  34. }
  35.  
  36. $(document).ready(function(){
  37.   validator=$('#commentForm').validate(options);
  38.   $("#reset").click(function(){
  39.     validator.resetForm();
  40.   });
  41.  
  42.   $("button").click(function(){
  43.     validator.form();
  44.   });
  45.  
  46.   $('#commentForm').submit(function(){
  47.     $(this).ajaxSubmit({
  48.       type:"post",
  49.       url:"test_save.php?time="+ (new Date()).getTime(),
  50.       beforeSubmit:showRequest,
  51.       success:showResponse
  52.     });
  53.     return false; //此处必须返回false，阻止常规的form提交
  54.   });
  55. });
  56. </script>

jquery.validate校验+jquery.form提交，配合使用的更多相关文章

  1. 2016 系统设计第一期 （档案一）jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  2. jquery.datepicker、jquery.validate、jquery.uploadify冲突解决

    Jquery 1.11.2 Jquery.validate 1.13.1 Jquery.Uploadify 3.2(flash版) Jquery.DatePicker 用的是Jquery-ui 1.1 ...

  3. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  4. JQuery validate.js 在ajax提交form时如何触发

    在使用jquery validate.js 插件时,发现,如果是用onclick事件捕获提交按钮的动作,并且ajax动态提交form,验证不会被触发,而是直接提交了form. 后来发现,需要手动调用该 ...

  5. Form表单利用Jquery Validate验证以及ajax提交

    #表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...

  6. jquery validate 校验使用总结

    一.jquery.validator表单验证id和name问题 因为后台是struts,表单提交,所有输入框的值保存在name=对象.名字中,而jquery.validator表单验证用的是name, ...

  7. Jquery客户端校验——jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  8. jquery.validate校验文件使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库<script src="../js/ ...

  9. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

随机推荐

  1. Dual transistor improves current-sense circuit

    In multiple-output power supplies in which a single supply powers circuitry of vastly different curr ...

  2. Visual Studio 2013在线文档地址备案

    Visual Studio 2013还没有离线的帮助文档,这里做个记录,以备后面使用. 地址:http://msdn.microsoft.com/zh-cn/library/dd831853.aspx

  3. [翻译] AnimatedTransitionGallery

    AnimatedTransitionGallery 转场动画回廊 https://github.com/shu223/AnimatedTransitionGallery Collection of i ...

  4. (转)找回vss超级管理员密码

    原文:http://www.cnblogs.com/446557021/archive/2011/01/05/1926213.html 如果忘记了VSS管理员密码,打开vss数据库所在的文件夹,打开d ...

  5. Python 爬虫（2）多线程

    前面说过由于GIL的存在,Python的多线程效率没有希望的那么高,python的多线程适合IO密集型的情况,而爬虫恰好就是一个IO密集的情况,因为爬虫中很大一部分时间,是在等待socket返回数据. ...

  6. sqllite3

    OS X自从10.4后把SQLite这套相当出名的数据库软件,放进了作业系统工具集里.OS X包装的是第三版的SQLite,又称SQLite3.这套软件有几个特色: 软件属于公共财(public do ...

  7. 给出a的定义 -- 指针 和 数组

  8. 使用mocha测试

    学习了MOCHA官网的示例,将学习成果记录一下.[原文+例子:使用mocha测试] mocha是什么 Mocha是一个跑在node和浏览器上的javascript测试框架,让异步测试变得简单有趣, 并 ...

  9. （转）LIB和DLL的区别与使用

    共有两种库:一种是LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代码由运行时加载在进程空间中的DLL提供,称为动态链接库dynamic link library.一种是LIB包含函数 ...

  10. CSS经验分享：如何书写可维护的CSS代码01

    转自:http://www.cnblogs.com/hxling/archive/2013/02/21/2920520.html 一.在样式表开头添加一个注释块,用以描述这个样式表的创建日期.创建者. ...