JQ使用多个失去焦点验证动态数据,满足条件才执行按钮提交动作,如何解决里面blur函数事件回调问题 - 知否问答 - 万象云+社区

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link href="http://cdn.bootcss.com/mui/3.7.1/css/mui.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script src="http://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script> <title>个人信息页面</title> <style> .mui-input-row.mui-radio.mui-left.mobile-inline-block{ display: inline-block; } label.no-float{ line-height: 1.5rem; } .type.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before { margin-left: -1.1rem; } .mui-checkbox.mui-left label, .mui-radio.mui-left label { padding-left: 2rem; } </style> </head> <body> <div class="mui-content"> <form class="mui-input-group"> <div class="mui-input-row"> <label>用户名</label> <input type="text" name="name" class="mui-input-clear" placeholder="请输入用户名"> </div> <div class="mui-input-row"> <label>手机号码</label> <input type="text" name="phone" class="mui-input-clear" placeholder="请输入手机号码"> </div> <div class="type"> <div class="mui-input-row"> <label class="no-float">性别</label> <div class="mui-input-row mui-radio mui-left mobile-inline-block"> <label class="sex">男</label> <input value="1" name="sex" type="radio" checked> </div> <div class="mui-input-row mui-radio mui-left mobile-inline-block"> <label class="sex">女</label><input name="sex" value="2" type="radio"> </div> </div> </div> <div class="mui-input-row"> <label>车牌</label> <input type="text" name="plate" class="mui-input-clear" placeholder="请输入车牌"> </div> <div class="mui-content-padded"> <button id='login' class="mui-btn mui-btn-block mui-btn-primary">提交信息</button> </div> </div> </form> </div> <script type="text/javascript"> mui.init() </script> </html> <script src="dlc.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //是否为空 function isNull(value) { if ($.trim(value).length) { return false; } else { return true; } } //判断手机或者电话号码格式 function checkMobileAndTel(value) { return /^1(3|4|5|7|8)\d{9}$/.test(value); }; //判断是否中文 function isChn(str){ var reg=/^[\u4E00-\u9FA5]+$/; if(!reg.test(str)){ return false; } return true; } //验证车牌号 function isLicenseNo(str) { return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/.test(str); } $(function () { var phone=$('input[name="phone"]'); var name=$('input[name="name"]'); var plate=$('input[name="plate"]'); phone.blur(function(){ //判断是否手机号 if(!isNull(phone.val())){ if( !checkMobileAndTel(phone.val()) ){ alert("不是一个手机号码"); $('button').attr('disabled','disabled'); } } }); name.blur(function(){ //判断是否全中文 if(!isNull(name.val())){ if(!isChn(name.val())){ alert("不是全中文"); $('button').attr('disabled','disabled'); } } }); plate.blur(function(){ //判断是否车牌 if(!isNull(plate.val())){ if(!isLicenseNo(plate.val())){ alert("车牌不对"); $('button').attr('disabled','disabled'); } } }); $('button').click(function(){ //tooltipbox.show('正在提交，请稍候...', null, 99999999); $('button').attr('disabled','disabled'); $.ajax({ type:"post", url:ajax_url+'information', dataType:'json', data:{sex:$('input[name="sex"]:checked').val(),name:$('input[name="name"]').val(),phone:$('input[name="phone"]').val(),plate:$('input[name="plate"]').val()}, success:function(res){ // alert(JSON.stringify(res)); //json成功后跳转 window.location.href = "http://www.xxxx.com"; // $('button').removeAttr('disabled'); },error:function(err){ alert(JSON.stringify("已经提交过数据，数据提交失败")); //WeixinJSBridge.call('closeWindow'); //关闭窗口 } }); }) }); </script>

回答动态