js判断登录是否input的输入值有误后为输入框和所填内容设置红色提醒

  为增强体验，在用户输入有误时会提供一些样式提示用户(提示样式有很多，不必拘泥于一种；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();
	}
})