原文链接：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样式文件

<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>

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. sqlserver获取指定数据库的描述

    SELECT 字段名= convert(varchar(100), a.name), 表名= convert(varchar(50), d.name ), 类型= CONVERT(varchar(50 ...

  2. uva 1203 - Argus(优先队列)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=3644" target="_blank ...

  3. MRIcro tutorial -- mricro 教程

      MRIcro tutorial 参考网址:http://www.mccauslandcenter.sc.edu/mricro/mricron/ http://www.cabiatl.com/mri ...

  4. PAT 1033. To Fill or Not to Fill (贪心)

    PAT-A的最后一题,最终做出来了... 是贪心,通过局部最优获得全局最优. 1. 将加油站按距离升序排序 2. 记录当前所在的加油站index,存有的汽油,花费.向后遍历全部 该站可抵达的加油站 3 ...

  5. TYVJ-P1864 守卫者的挑战 题解

    P1864 [Poetize I]守卫者的挑战 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜 ...

  6. OpenCV学习(4) Mat的基本操作(1)

          图像在OpenCV中都是通过Mat类来存储的,Mat可以用来表示N维矩阵,当然用的最多的还是二维矩阵.       Mat类有两部分组成:第一部分是头信息,这些信息主要用来描述矩阵,比如矩 ...

  7. 织梦(Dedecms) 5.1 feedback_js.php 注入漏洞

    漏洞版本: DEDECMS 5.1 漏洞描述: 同样是在magic_quotes_gpc=off的情况下可用 此漏洞可拿到后台管理员的帐号和加密HASH,漏洞存在文件plus/feedback_js. ...

  8. hdu 1158-Employment Planning，n*n*n

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1158 解题思路就不多说,动态规划. 值得提及的是题目没有给出数据范围,水过的都默认工人数目不超过100 ...

  9. Configure Trusted Roots and Disallowed Certificates

    Configure Trusted Roots and Disallowed Certificates Updated: May 5, 2014 Applies To: Windows 8.1, Wi ...

  10. 【Project Euler 8】Largest product in a series

    题目要求是: The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × ...