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();
	}
})