为增强体验,在用户输入有误时会提供一些样式提示用户(提示样式有很多,不必拘泥于一种;JS代码底部附带绑定enter键函数),比如改变输入框的颜色:
正常效果图:
添加样式效果图
HTML
、、、HTML
<!-- 账号 -->
<div class="username-Box">
<span><i class="fa fa-user"></i></span>
<input type="text" name="username" id="username" autocomplete="off" value="" placeholder="请输入手机号" />
</div>
<!-- 密码 -->
<div class="password-Box">
<span><i class="fa fa-lock"></i></span>
<input type="password" name="pwd" id="pwd" autocomplete="off" value="" placeholder="密码由6-20位字母、数字和字符组成" />
</div>
JQuery
这里样式是直接添加的,如果样式比较多,也可改用css添加选择器,结构会清晰、容易理解。这里将方法都封装起来了,有利于其他函数的监听。为了代码理解,有些地方未做处理,如正则未做详细格式,可根据个人需求填写。分享,一起成长!
```javascript
//验证所用变量
var userflag = false;
var pwdflag = false;
//账号验证
function testUserName(){
var username = $("#username").val();
var testUser; //正则验证规则
if(username == ""){
$(".username-Box").css('border','1px solid red');
$("#username").css('color','red');
return;
}else{
if(!(testUser.test(username))){
$(".username-Box").css('border','1px solid red');
$("#username").css('color','red');
return;
}else{
//填写正确后,恢复原来的样式
$(".username-Box").css('border','1px solid white');
$("#username").css('color','white');
userflag = ture;
}
}
}
//密码验证
function testPwd(){
var pwd = $("#pwd").val();
var testPwd; //正则验证规则
if(pwd == ""){
$(".password-Box").css('border','1px solid red');
$("#pwd").css('color','red');
return;
}else{
if(!(testPwd.test(pwd))){
$(".password-Box").css('border','1px solid red');
$("#pwd").css('color','red');
return;
}else{
//填写正确后,恢复原来的样式
$(".password-Box").css('border','1px solid white');
$("#pwd").css('color','white');
pwdflag = true;
}
}
}
//Ajax
function ajaxWay(){
if(userflag && pwdflag){
$.ajax({
type:"post",
url:"",
dataType:"json",
data:{
"username":username,
"userPwd":pwd
},
success:function(data){
if(data.code == 200){
}else if(data.code == 100){
}
},
error:function(){
alert("网络故障");
}
});
}
}
//点击登陆
$(".logOn-btn").click(function(){
testUserName();
testPwd();
ajaxWay();
})
//绑定enter键
$(document).keydown(function(event){
if(event.keyCode == 13){
$(".logOn-btn").click();
}
})