极客观点
项目管理
HarmonyOS
<!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>我的需求是checkMobileAndTel,isChn,isLicenseNo判断全部正常才执行$('button').removeAttr('disabled');否则一直都是$('button').attr('disabled','disabled');
请问有无简便一点方法可以
$(function () {} )部分改成如下（ajax内省略）：
基本思路是如此，其实还有优化的地方，比如：
1.只用blur来判断并不妥，还必须让用户做一次移出焦点操作。
2.input DOM结构优化的话，可以进一步减少js判定处理。
3.用disabled来控制不可点击、效果的想法，也可以进行优化
这些你可以再好好想想