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作为一个 ...
随机推荐
- nodejs之处理GET请求
一个简单的httpserver.接收get请求,并返回解析之后的数据. 以下是服务的代码: var http = require("http"); var url = requir ...
- hdu 2176 取石子游戏
http://acm.hdu.edu.cn/showproblem.php?pid=2176 提示:尼姆博弈,异或 #include <iostream> #include <cst ...
- Openfire 性能优化
Openfire 是一个XMPP协议的IM Server. Openfire使用mysql配合它不知所谓几乎无效的的Cache机制就注定无法支撑高并发, 所以第一步,将数据库切换为比较强一点的Mon ...
- nginx实现openfire负载均衡
Nginx版本必须是1.9以上,不然不支持tcp连接,要么加入其他插件 在nginx.conf文件中加入下图中的代码,图中的ip与端口配成自己的,配置好后,客户端请求listen监听的端口,ip为ng ...
- SharePoint 入门书籍推荐
最近,总有人说刚入门SharePoint,没有好的资料或者电子书,资料推荐大家多看看博客园和CSDN的博客.对于看博客,我一般是两个思路,要么找一个人的从头到尾看一遍,觉得有意义的,就把地址加收藏:或 ...
- Java多线程学习（吐血超具体总结）
林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka 写在前面的话:此文仅仅能说是java多线程的一个入门.事实上Java里头线程全然能够写一本书 ...
- Orchard运用 - 学习资源分享
这段时间研究Orchard,看到一些资源十分有用. 比如国内还是有些牛人在分享心得,在此也广播一下给新手: JustRun对Orchard的一些代码分析 Orchard源码分析 Orchard中文社区 ...
- jquery点击click事件和blur事件冲突如何解决
最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果. 但比较头疼的是input上添加blur事件 ...
- C#的四个基本技巧
1．如果可能尽量使用接口来编程 .NET框架包括类和接口,在编写程序的时候,你可能知道正在用.NET的哪个类.然而,在这种情况下如果你用.NET支持的接口而不是它的类来编程时,代码会变得更加稳定.可用 ...
- 【云计算】jenkins,docker,mesos,marathon,k8s相关资料
参考资料: 基于Apache Mesos 构建高可靠,高可用的Jenkins CI:http://blog.csdn.net/ebay/article/details/43529401 Docker ...