1. 程式人生 > >JavaScript完成簡單的表單校驗案例

JavaScript完成簡單的表單校驗案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊介面</title>
<script type="text/javascript">
	function checkForm(){
		//alert("aa");
		/* 檢驗使用者名稱 */
		//1.獲取使用者輸入的資料
		var uValue = document.getElementById("user").value;
		//alert(uvalue);
		if(uValue == ""){
			//2.給出錯誤提示資訊
			alert("使用者名稱不能為空");
			return  false;
		}
	    /* 檢驗密碼 */
	    var pValue = document.getElementById("password").value;
	    if(pValue == ""){
	    	alert("密碼不能為空");
	    	return false;
	    }
		
	    /* 檢驗確認密碼 */
	    var rpValue = document.getElementById("repassword").value;
	    if(rpValue != pValue){
	    	alert("兩次密碼輸入不一致!");
	    	return false;
	    }
	}
</script>
</head>
<body>
	<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
		<table >
			<tr>
				<td>使用者名稱</td>
				<td><input type="text" name="user" size="34px" 
				    id="user"></td>
			</tr>
			<tr>
				<td>密碼</td>
				<td><input type="password" name="password" size="34px"
					id="password"></td>
			</tr>
			<tr>
				<td>確認密碼</td>
				<td><input type="password" name="repassword" size="34px"
					id="repassword"></td>
			<tr>

				<td colspan="2"><input type="submit" value="註冊"></td>
			</tr>
		</table>
	</form>
</body>
</html>