用的是formValidator表单验证插件,当输入完成后点击提交,会先验证输入的是否正确,验证成功会出现对号但并没有提交表单,再点击一次才会成功提交,怎么做到点击时验证和提交同时进行。
$.formValidator.initConfig({formid:"myform",autotip:true}); $("#mobile").formValidator({ onshow:"请填写正确的手机号", onfocus:"手机号不能为空", oncorrect:'此手机号可以使用' }).regexValidator({ regexp: "^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$", onError: "手机号码格式不正确" }).ajaxValidator({ datatype : "html", async : true, url : def.url+"reg_check_mobile", success : function(data){ if(data==0){ $('#fs_moblies').attr('class',''); //$('.reg_button_form_js').attr('style','display:none;'); return true; }else if(data==1){ return false; } else{ return false; } }, error: function(XMLHttpRequest, textStatus, errorThrown){alert("服务器没有返回数据,可能服务器忙,请重试"+errorThrown);}, onerror : "手机号已存在,请更换手机号", onwait : "正在验证,请稍候..." }); $("#verify").formValidator({onshow:"请填写验证码",onfocus:"请填写验证码",oncorrect:'验证码正确'}).inputValidator({min:1,onerror:"请填写验证码"}).ajaxValidator({ datatype : "html", async : true, url : def.url+"register_verify", success : function(data){ if(data==0){ return true; }else if(data==1){ return false; } else{ return false; } }, error: function(XMLHttpRequest, textStatus, errorThrown){alert("服务器没有返回数据,可能服务器忙,请重试"+errorThrown);}, onerror : "验证码不正确", onwait : "正在验证,请稍候..." });
插件具体我没去找它的代码来看
但是基本可以确定:
因为验证码的验证是异步的,使用AJAX
当你填写完验证码来点击提交按钮的时候,执行的逻辑肯定是验证码输入框的blur事件,因为这个插件不可能傻到某一个待填项正确了就提交整个表单,因此在blur事件的异步验证没有返回前,后执行的submit事件一定会被这个插件阻止
问题就出在这个时间差上,验证码输入框失焦后,异步的验证返回前,执行了submit动作,该动作被阻止,当第二次点击的时候,验证码的异步验证已经完成了,因此表单提交成功了
我有一个解决方案,可以把验证码的异步验证改为onkeyup事件,最好是输入完最后一位开始验证,这样在你还没有点击提交按钮前,验证就已经完成,再点击提交按钮自然就成功了