在做表单验证的时候,经常会遇到表单提交时按钮样式的问题,这里可以给出较为详细的方案。
如图:
输入前提交按钮置灰且不可点击,当账号和密码都输入正确后,按钮才会变成可点击的红颜色。
之前我一直在想怎么获取input的变化也就是change事件,其实input是没有change事件的,倒是有一个propertychange事件,这个在上面的文章有提到过。这个propertychange事件是可以获取到的,那么问题来了,由于每次密码或者账号输入的时候有一个校验的提示,如图:
当我们获得每一次的propertychange事件的时候,都会弹出这个提示出来因为在这个事件里面每次都监听到了input输入数值的变化从而每次都会弹出提示,你能想象你在输入东西的时候有个toast提示一直弹么,用户体验太差了!!!
后来通过网上搜索找到了一个方法可以解决这个问题,就是加一个定时器,而且每次定时器都清空,只在你最后输入完的时候做一次判断且提示你,不过用到的是keyup事件,propertychange事件没试过,应该也是可以的,毕竟赶项目,解决问题为重。
话不多说,代码如下:
HTML代码:
<div class="list-block loginBox">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">账号</div>
<div class="item-input">
<input type="text" placeholder="请输入手机号码" class="userTel" value="">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">密码</div>
<div class="item-input">
<input type="password" placeholder="请输入6-20位字符" class="userPw" value="" maxlength="20">
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-100"><input type="submit" value="登录" id="login" class="button button-big button-fill button-danger disabled"></div>
</div>
</div>
JS代码:
require.config({
paths: {
"base": "../../js/base/base",
"secMenu": "../../js/base/secMenu",
"template": "../../js/base/template"
}
});
define(['base','template','secMenu'], function (base,template,secMenu){
function userTel(){
regExp=/^1[3|4|5|7|8]\d{9}$/;
if($(".userTel").val()==""){
$.toast('账号不能为空', 2000)
return false;
}
else if(!regExp.test($(".userTel").val())){
$.toast('账号格式错误', 2000)
return false;
}
else{
return true;
}
}
$(".userTel").blur(userTel);
//密码校验:6-20数字和英文的组合
function userPw(){
regExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
if($(".userPw").val()==""){
$.toast('密码不能为空', 2000)
return false;
}
else if(!regExp.test($(".userPw").val())){
$.toast('密码格式错误', 2000)
return false;
}
else{
return true;
}
}
$(".userPw").blur(userPw);
var timer=-1;
$(".userTel,.userPw").bind("keyup",function(event){
var val=$(this).val();
timer && clearTimeout(timer);
timer = setTimeout(function(){
if(userTel()&&userPw()){
$("#login").removeClass("disabled");
return true;
}else{
$("#login").addClass("disabled");
return false;
}
//将值发送到服务器
getCompList(val);
},1500);
})
});
由于这个项目用的是require模块化的方法,一般直接引用define里面的3个函数就行了。