正常的表单都是使用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. PowerDesigner实用操作

    1. 让PhysicalDiagram里的表显示字段名Tools→Display Preferences→在General Settings里选择Table→点击Advanced→选择Form下的Co ...

  2. Redis Geo: Redis新增位置查询功能

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/144.html 移动互联网增进了人与人之间的联系,其中基于位置信息的服务( ...

  3. [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例二.

    为了更好的排版, 所以将IK分词器的安装重启了一篇博文,  大家可以接上solr的安装一同查看.[Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一: http://ww ...

  4. [Java面试四]Strust2总结及在面试中的一些问题.

    1. JavaEE软件三层结构和MVC的区别? JavaEE软件三层机构是由sun公司提供JavaEE开发规范的:Web层(表现层).业务逻辑层.数据持久层.[其中WEB层会使用前端控制器模式] MV ...

  5. Android WebView 开发教程

    声明在先:必须在AndroidMainfest.xml 里面声明权限,否则在Java里面编写的所有WebView浏览网页的代码都无法正常使用 <uses-permission android:n ...

  6. DELPHI支付宝支付代码

    真实业务场景的考虑 按照支付宝或者微信支付的开发手册的说法,一个标准的客户端接入支付业务模型应该是这样的,我忽略时序图,只用文字描述: 用户登录客户端,选择商品,然后点击客户端支付. 客户端收集商品信 ...

  7. GOF设计模式特烦恼

    这段时间,学习状态比较一般,空闲时基本都在打游戏,和研究如何打好游戏,终于通过戏命师烬制霸LOL,玩笑了.为了和"学习"之间的友谊小船不翻,决定对以往学习过的GOF设计模式做一个简 ...

  8. 免费在线loading生成。

    loading这个在项目中也是经常要使用,这里推荐一个网站http://www.ajaxload.info/可以在线生成loading. 进来页面是这样的. 勾选transparent将会生成透明的g ...

  9. SQL PASS将于8月24日在北京中医药大学举办线下活动

    活动主题:复制架构的实现和调优以及SQL Server BI在传统行业的应用 地点:北三环东路11号 北京中医药大学 白色的1号楼教学楼后楼5层511房间 时间:2013年8月24日 9:00-12: ...

  10. struts2标签

    一.通用标签 1.property     Name Required Default Evaluated Type Description default false   false String ...