jquery.validate校验+jquery.form提交，配合使用

原文链接：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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yingsong/p/5049625.html