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>
jquery.validate校验+jquery.form提交，配合使用的更多相关文章
- 2016 系统设计第一期 （档案一）jQuery ajax serialize()方法form提交数据
jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...
- 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 ...
- jquery.validate和jquery.form配合实现验证表单后AJAX提交
基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...
- JQuery validate.js 在ajax提交form时如何触发
在使用jquery validate.js 插件时,发现,如果是用onclick事件捕获提交按钮的动作,并且ajax动态提交form,验证不会被触发,而是直接提交了form. 后来发现,需要手动调用该 ...
- Form表单利用Jquery Validate验证以及ajax提交
#表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...
- jquery validate 校验使用总结
一.jquery.validator表单验证id和name问题 因为后台是struts,表单提交,所有输入框的值保存在name=对象.名字中,而jquery.validator表单验证用的是name, ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jquery.validate校验文件使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库<script src="../js/ ...
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
随机推荐
- 关于jQuery中的 offset() 和 position() 的用法
---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
- Hbulider 支持less保存自动编译
设置less配置:文件写 .less,路径找lessc.cmd,找不到就下载,命令参数写:%FileName% %FileBaseName%.css这样以后就可以less文件自动生成css了!
- Java：Spi 小实战
背景 Java 中区分 Api 和 Spi,通俗的讲:Api 和 Spi 都是相对的概念,他们的差别只在语义上,Api 直接被应用开发人员使用,Spi 被框架扩张人员使用,详细内容可以看:http:/ ...
- python爬虫beautifulsoup4系列4-子节点
前言 很多时候我们无法直接定位到某个元素,我们可以先定位它的父元素,通过父元素来找子元素就比较容易 一.子节点 1.以博客园首页的摘要为例:<div class="c_b_p_desc ...
- Android开发，布局xml文件命名注意事项——不能包含任何大写字母
转自:http://blog.sina.com.cn/s/blog_628b45090100zuit.html 在开发Android应用时,会接触到布局文件,一般在 工程名/res/layout/*. ...
- easyui datagrid checkbox multiple columns have been done do
lengku1987 2013-01-06 22:27:47 Sponsored Links easyui datagrid checkbox multiple columns have ...
- Shell学习:grep, sed, awk命令的练习题
http://www.cnblogs.com/chengmo/archive/2013/01/17/2865479.html 文件:datafileSteve Blenheim:238-923-736 ...
- 【架构】OpenResty相关资料
OpenResty最佳实践 在2012年的时候,我加入到奇虎360公司,为新的产品做技术选型.由于之前一直混迹在python圈子里面,也接触过nginx c模块的高性能开发,一直想找到一个兼备pyth ...
- 隐马尔科夫模型(Hidden Markov Models)
链接汇总 http://www.csie.ntnu.edu.tw/~u91029/HiddenMarkovModel.html 演算法笔记 http://read.pudn.com/downloads ...
- CLS（公共语言规范）的CLSCompliant（跨语言调用）
.net的一个很重要的特性就是跨语言的编程,用C#写的dll可以在VB.net里调用,例如:用C#写的一个类,编译到dll中,然后在VB.net中调用: using System;namespace ...