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

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

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

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

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

//表单验证 2     $("#query").validate({ 3         onkeyup  : false, 4         onclick  : false, 5         onfocusout : false, 6             rules : { 7                 msg : { 8                     required    : true, 9                     maxlength    : 1010                 }11             },12             messages:{13                 msg:{14                     required    : '请输入短信内容!',15                     maxlength    : '长度超过10!'16                 }17             },18             showErrors : function(errorMap, errorList) {19                 var msg = "";20                 $.each(errorList, function(i,v){21                   msg += (v.message+"\r\n");22                 });23                 if(msg!="")24                 Ext.Msg.alert('表单',msg + fix);25             },26             invalidHandler : function(){27                 return false;28             },29             submitHandler : function(){30                 //表单的处理31                 Ext.Msg.confirm("确认", "是否确认发送?" + fix, function(button,text){32                    if(button == 'yes'){33                            loadMarsk.show();34                            $.ajax({35                                url:'<%=basePath %>promotionAction.do?method=group',36                                dataType:'json',37                                type:'post',38                                data:$('#query').serialize(),39                                error:function(){40                                    Ext.Msg.alert('错误','请求错误！' + fix);41                                    loadMarsk.hide();42                                },43                                success:function(data){44                                    Ext.Msg.alert('成功',data.msg + fix);45                                    loadMarsk.hide();46                                }47                            })48                    }49                 } );   //confirm50                 return false;//阻止表单提交51             }52         });

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

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

分类: jQuery/JavaScript

标签: jQuery