正常的表单都是使用submit按钮来提交,jquery  validate插件可以方便的做表单验证。

做一个发送短信的功能,向目标表插入多条记录,界面采用ajax来提交表单,等待效果直接用ext的遮罩了。

但是如何验证却碰到问题。

解决方式很简单,表单跟正常表单一样,validate的submitHandler,invalidHandler这2个方法都需要覆盖,都 return false;这样表单就不会在点击按钮的时候提交了,表单验证跟正常验证起作用。submitHandler在return 之前写上我们的表单处理代码就ok了。

代码如下,可以忽略ext相关代码。

 //表单验证
$("#query").validate({
onkeyup : false,
onclick : false,
onfocusout : false,
rules : {
msg : {
required : true,
maxlength : 10
}
},
messages:{
msg:{
required : '请输入短信内容!',
maxlength : '长度超过10!'
}
},
showErrors : function(errorMap, errorList) {
var msg = "";
$.each(errorList, function(i,v){
msg += (v.message+"\r\n");
});
if(msg!="")
Ext.Msg.alert('表单',msg + fix);
},
invalidHandler : function(){
return false;
},
submitHandler : function(){
//表单的处理
Ext.Msg.confirm("确认", "是否确认发送?" + fix, function(button,text){
if(button == 'yes'){
loadMarsk.show();
$.ajax({
url:'<%=basePath %>promotionAction.do?method=group',
dataType:'json',
type:'post',
data:$('#query').serialize(),
error:function(){
Ext.Msg.alert('错误','请求错误!' + fix);
loadMarsk.hide();
},
success:function(data){
Ext.Msg.alert('成功',data.msg + fix);
loadMarsk.hide();
}
})
}
} ); //confirm
return false;//阻止表单提交
}
});

关键在于:validate的submitHandler,invalidHandler这2个方法都需要覆盖,都 return false;

转自:http://www.cnblogs.com/longterm/archive/2012/05/18/2507594.html

【转载】jquery validate验证插件,在ajax提交方式下的验证的更多相关文章

  1. jQuery通过jquery.form.js插件使用AJAX提交Form表单

    我简单使用了一下,jQuery Form插件有一下优点:  1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可. ...

  2. jquery.validate.js插件的使用方法

    近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...

  3. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  4. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

  5. 使用jquery.validate.js插件进行表单里控件的验证

    jsp中具体实现的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  6. 【转载】[jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证

    最近项目开发中遇到这样的需求“手机号码或者固话至少填写一个”,如下图所示: 项目采用的jquery.validate.js验证组件,目前组件不支持这种“或”逻辑的验证,于是就自己定义一个 jQuery ...

  7. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  8. jQuery validate在没有校验通过的情况下拒绝提交

    下面通过一个简单的例子说明,这个问题,可能是很多人遇到的,验证不通过的时候,依然提交了表单. HTML <form class="survey" id="surve ...

  9. ajax提交表单无法验证easyui的验证选项(比如required等)

    在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情.   解决办法:使用jquery中ajax的beforeSend事件 ...

随机推荐

  1. 【转载】学习资料存档:jQuery的deferred对象详解

    我在以前的文章里提到promise和deferred,这两个东西其实是对回调函数的一种写法,javascript的难点之一是回调函数,但是我们要写出优秀的javascript代码又不得不灵活运用回调函 ...

  2. C++中new和delete的背后

    关于 C++中new背后的行为, 以前已经写过一篇了 理解C++中new背后的行为, 但是里面也只是泛泛而谈,没有真凭实据, 下面我们从汇编的角度看C++编译器究竟在背后干了什么? 我们的代码很简单, ...

  3. 爱上MVC3系列~监视Action的运行时间,并提供超时记录机制

    回到目录 文章出现的原因 很久没写关于MVC的文章了,原因是将关注点移向了MVVM和DDD这边,而这篇文章完全是因为公司项目的需要,因为公司网站总是不定时的502,而这由可能是程序超时所引起的,为了分 ...

  4. 用css来写一些简单的图形

    在写网页的过程中,有时我们需要用到一些简单的图片但是手头又没有合适的,我们其实可以自己来写,下面我就简单的介绍几个例子: 1.上三角 Triangle Up #triangle-up { width: ...

  5. Atitit js中的依赖注入di ioc的实现

    Atitit js中的依赖注入di ioc的实现 全类名(FQCN)为标识符1 混合请求模式1 使用类内  builder  即可..2 Service locator method走ok拦2 Jav ...

  6. qqzoneQQ空间漏洞扫描器的设计attilax总结

    qqzoneQQ空间漏洞扫描器的设计attilax总结 1.1. 获取对方qq(第三方,以及其他机制)1 1.2. QQ空间的html流程1 1.3. 判断是否有权限1 1.4. 2015年度Web服 ...

  7. 将图片的二进制字节字符串在HTML页面以图片形式输出

    具体实现代码如下: 1.新建一个一般处理程序: Image.ashx using System; using System.Collections.Generic; using System.Linq ...

  8. Liferay7 BPM门户开发之42: Liferay核心JSP定制扩展

    Liferay最大的好处是不仅接口强大,利于扩展,就连JSP定制扩展都提供了3种方式. 修改核心jsp代码,有3种修改方式:1.暴力修改直接修改(位于portal-web/docroot/html), ...

  9. iOS设备的越狱方法

    最近公司的事情很忙,在开发一个类似于微信的App,经常加班,所以也没有时间去更新微信公众账号的内容了.iOSJailbreak, 申请这个账号大概有一个多月了吧,发布的内容不多,更多是针对开发者的内容 ...

  10. javascript中可变值与不可变值(原始值)

    字符串原始值修改不了1 var str = "abc"; 2 str[0] = "d"; 3 console.log(str[1]="f") ...