概述：本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。
方式一：是通过jquery.validate的submitHandler选项，即当表单通过验证时执行回调函数。在这个回调函数中通过jquery.form来提交表单；
方式二：是通过jquery.form的beforeSubmit，即在提交表单前执行的回调函数，这个函数如果返回true，则提交表单，如果返回false，则终止提交表单。根据jquery.validate插件的valid()方法，就可以通过jquery.form提交表单时来对表单进行验证。
方式三：是通过jquery.validate验证表单的validate方法。这个方法的好处是对表单验证的控制更加自由
实例：下面通过三个实例分别阐述上面的三种方式
载入CSS样式文件
复制代码 代码如下:
<link type="text/css" media="screen" href="https://www.jb51.net/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="https://www.jb51.net/js/jQuery1.6.2.js"></script> <script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/js/jquery.form.js"></script> <script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/js/jquery.validate.js"></script> <script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/js/localization/messages_tw.js"></script>
HTML内容
<body><span></span> <form> <fieldset> <legend>jquery.validate+jquery.form提交的三种方式</legend> <p> <label for='cusername'>姓名</label><em>*</em> <input size='25' /> </p> <p> <label for='cemail'>电子邮件</label><em>*</em> <input size='25' /> </p> <p> <input 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源码：下载
一些问题