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作为一个 ...
随机推荐
- JS返回数组种类和个数（面试常问）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 咏南MORMOT中间件免费开源
咏南MORMOT中间件免费开源 源码放QQ群(92449782)共享文件里面
- php 将网页执行的输出写入到本地文件中
php -f /var/www/html/default/script/lol_score_calculate/calculate.php >>score_calcutelate.log
- memcache在大型网站的应用策略
[部署策略] 基于memcached的 slab 和dump的内存管理方式,它产生的内存碎片比较少,不需要OS去做繁杂的内存回收,所以它对CPU的占用率那是相当的低.所以建议将它跟占用CPU较高 的W ...
- faked 一个用于 mock 后端 API 的轻量工具
一.简介 faked 是一个在前端开发中用于 mock 服务端接口的模块,轻量简单,无需要在本地启动 Server 也无需其它更多的资源,仅在浏览器中完成「请求拉截」,配合完整的「路由系统」轻而易举的 ...
- 存储配置关系&知识图谱
14年前注册的Blog还是能用的,撸一个S(storage)-CMDB Demo发一小博 什么是图库 图形数据库是NoSQL数据库的一种类型,它应用图形理论存储实体之间的关系信息.图形数据库是一种非关 ...
- android用jsonReader来解析json
对于这个json: { "id" : "3232", "data" : [{ "data1" : "555&q ...
- Qt 维护工具MaintenanceTool.exe 使用
QT如何管理组件(解决“要继续此操作,至少需要一个有效且已启用的储存库”问题) 转载2017-10-26 01:48:46 标签:qt QT的组件管理软件并没有在开始菜单或者桌面添加快捷方式(5.9版 ...
- 要做的题目-要用到hadoop资源
关于项目,我出两个练手题目: 一.多机数据处理.有 10 台机器,每台机器上保存着 10 亿个 64-bit 整数(不一定刚好 10 亿个,可能有上下几千万的浮动),一共约 100 亿个整数(其实一共 ...
- 刷新SqlServer所有视图元数据的存储过程
摘自: http://www.cnblogs.com/yashen/archive/2004/12/23/81000.html 我们在使用SqlServer时经常遇到这种情况,当修改某个表的结构后,相 ...