js登入與註冊驗證

經常寫js驗證，感覺很麻煩，這次就把他整理貼出來，以後可以直接用了。具體介紹這裡不羅嗦了，直接貼程式碼，相信大家都能理解程式碼的含義

登入驗證：

Jsp頁面程式碼：

<form action="userLogin.action" method="post" οnsubmit="return login();" id="loginForm">
	<h3>使用者登入</h3>
	<br /> 用 戶 名：<input type="text" name="user.username" id="uName" style="height: 30px;width: 220px;font-size: 20px;" /><br />
	<br /> 密    碼：<input type="password" name="user.password" id="uPass" style="height: 30px;width: 220px;font-size: 20px;" /><br />
	<br /> <input type="submit" value="登入" style="height: 30px;width: 60px;font-size: 20px;" />     
               <input type="reset" value="重置" style="height: 30px;width: 60px;font-size: 20px;" />
 </form>

js驗證程式碼：

function login() {
	// console.info("點選了登入");
	var userName = $("#uName").val();
	// console.info(userName)
	var userPass = $("#uPass").val();
	// console.info(userPass);
	if (userName == "" || userName == null) {
		alert("使用者名稱不能為空");
		return false;
	} else if (userPass == "" || userPass == null) {
		alert("密碼不能為空");
		return false;
	} else {
		return true;
	}
}

註冊驗證：

JSP頁面程式碼：

<span style="white-space:pre">				</span><form action="userRegister.action" method="post" οnsubmit="return register();">
					<h3>使用者註冊</h3>
					<table>
						<tr>
							<td style="text-align: right;width: 200px;line-height: 50px;">用 戶 名<font
								color="red">*</font>：
							</td>
							<td><input type="text" name="user.username"
								οnblur="return checkname()" id="uName"
								style="width: 220px;font-size: 16px;" /></td>
							<td id="namets"
								style="width: 150px;height:40px;text-align: left;font-size: 12px;"></td>
						</tr>
						<tr>
							<td style="text-align: right;line-height: 50px;">密    碼<font
								color="red">*</font>：
							</td>
							<td><input type="password" id="uPass" name="user.password"
								οnblur="return checkpass();"
								style="width: 220px;font-size: 16px;" /></td>
							<td id="passts"
								style="width: 150px;text-align: left;font-size: 12px;"></td>
						</tr>
						<tr>
							<td style="text-align: right;line-height: 50px;">確認密碼<font
								color="red">*</font>：
							</td>
							<td><input type="password" name="" id="uRPass"
								οnblur="return checkrpass();"
								style="width: 220px;font-size: 16px;" /></td>
							<td id="passrts"
								style="width: 150px;text-align: left;font-size: 12px;"></td>
						</tr>
						<tr>
							<td style="text-align: right;line-height: 50px;">郵    箱<font
								color="red">*</font>：
							</td>
							<td><input type="text" name="user.email" id="uEmail"
								οnblur="return checkemail();"
								style="width: 220px;font-size: 16px;" /></td>
							<td id="emailts"
								style="width: 150px;text-align: left;font-size: 12px;"></td>
						</tr>
						<tr>
							<td></td>
							<td style="text-align: center;line-height: 55px;width:220px"><input
								type="submit" value="註冊"
								style="width: 60px;font-size: 16px;" />         <input
								type="reset" value="重置"
								style="width: 60px;font-size: 16px;" /></td>
						</tr>
					</table>
				</form>

js驗證程式碼：

function register() {
	if(!checkname()){
		return false;
	}else if (!checkpass()) {
		return false;
	} else if(!checkemail()){
		return false;
	} 
	return true;
}

function checkname()	
{
	var name = document.getElementById("uName").value;	
	var ts = document.getElementById("namets");
	if(name.length<3|| name.length>15)	
	{	
	    ts.innerHTML ="使用者名稱長度須在3-15之間!";
	    ts.style.color="red";
	    return false;
	}
	$.post("checkUserName.action", {" userName": name },function(data){
		var d = $.parseJSON(data);
		//console.log(d.success);
		if(d.success!=true){
			ts.innerHTML ='使用者名稱已存在!';
			ts.style.color='red';
			 return true;
		}
	});
	ts.innerHTML ='使用者名稱可以使用！';
	ts.style.color='green';
	return true;
}
function checkpass(){
	var userPass = $("#uPass").val();
	
	var pts = document.getElementById("passts");
	
	if(userPass.length<6 || userPass.length >15)	
	{	
		pts.innerHTML ="密碼長度須在6-15之間!";
		pts.style.color="red";
	    return false;
	}
	pts.innerHTML ="密碼可以使用!";
	pts.style.color="green";
	return true;
}
function checkrpass(){
	var userPass = $("#uPass").val();
	var userRPass = $("#uRPass").val();
	var prts =  document.getElementById("passrts");
	if (userPass != userRPass) {
		prts.innerHTML="兩次密碼輸入不一致!";
		prts.style.color="red";
		return false;
	}
	prts.innerHTML ="輸入一致!";
	prts.style.color="green";
	return true;
}
function checkemail(){
	var userEmail = $("#uEmail").val();
	var ets = document.getElementById("emailts");
	if(!isEmail(userEmail)){
		ets.innerHTML ="郵箱格式不正確!";
		ets.style.color="red";
		return false;
	} 
	ets.innerHTML ="郵箱可以使用!";
	ets.style.color="green";
	return true;
}
function isEmail(str){
    var reg = /[a-z0-9-]{1,30}@[a-z0-9-]{1,65}.[a-z]{3}/;
    return reg.test(str);
}