Skip to content

Latest commit

 

History

History
152 lines (116 loc) · 3.4 KB

表單校驗.md

File metadata and controls

152 lines (116 loc) · 3.4 KB
Raw

表單校驗

演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		/*
		function checkUser() {
			
			var flag;

			var oUserNode = document.getElementsByName("user")[0];

			var name = oUserNode.value;

			//定義正則表達式
			var reg = new RegExp("^[a-z]{4}$", "i");//i -> 忽略大小寫, ^ -> 開頭, $ -> 結尾

			// reg = new RegExp("^\\d{4}$");//必須是四個數字
			reg = /^\d{4}$/;

			var oSpanNode = document.getElementById("userspan");

			// if(name == "abc") {
			if(reg.test(name)) {
				
				oSpanNode.innerHTML = "用戶名正確".fontcolor("#53DF43");
				flag = true;
			} else {

				oSpanNode.innerHTML = "用戶名錯誤".fontcolor("#FE0202");
				flag = false;
			}

			return flag;
		}
		*/

		/*
		 * 發現很多校驗除了內容不同外，校驗的過程是一樣的
		 * 所以就進行了代碼的提取
		 */
		function check(name, reg, spanId, passinfo, errinfo) {

		 	var flag;

			var val = document.getElementsByName(name)[0].value;

			var oSpanNode = document.getElementById(spanId);

			// if(name == "abc") {
			if(reg.test(val)) {
				
				oSpanNode.innerHTML = passinfo.fontcolor("#53DF43");
				flag = true;
			} else {

				oSpanNode.innerHTML = errinfo.fontcolor("#FE0202");
				flag = false;
			}
			return flag;
		}

		 //校驗用戶名
		function checkUser() {

		 	var reg=/^[a-z]{4}$/i;
		 	return check("user", reg, "userspan", "用戶名正確", "用戶名錯誤");
		}

		//校驗密碼
		function checkPsw() {

			var reg = /^\d{4}$/;
			return check("psw", reg, "pswspan", "密碼格式正確", "密碼格式錯誤");
		}

		//校驗確認密碼，只要和密碼一致即可
		function checkRepsw() {

			var flag;
			//獲取密碼框內容
			var pass = document.getElementsByName("psw")[0].value;
			
			//獲取確認密碼框內容
			var repass = document.getElementsByName("repsw")[0].value;

			//獲取確認密碼的 span 區域
			var oSpanNode = document.getElementById("repswspan");

			if(pass == repass) {
				
				oSpanNode.innerHTML = "密碼一致".fontcolor("#53DF43");
				flag = true;
			} else {

				oSpanNode.innerHTML = "密碼不一致".fontcolor("#FE0202");
				flag = false;
			}
			return flag;
		}

		//校驗郵件
		function checkMail() {

			var reg = /^\w + @\w + (\.\w + ) + $/i;//\w -> 一次或多次
			return check("mail", reg, "mailspan", "郵件地址正確", "郵件地址錯誤");
		}

		//提交事件處理
		function checkForm() {

			if(checkUser() && checkPsw() && checkRepsw() && checkMail())
				return true;
			return false;
		}

		//提交按鈕功能
		function submitBut() {

			var oFormNode = document.getElementById("userInfo");

			oFormNode.submit();
		}
	</script>
	<form id="userInfo" onsubmit="return checkForm()">
		用戶名稱:<input type="text" name="user" onblur="checkUser()"><!--onblur -> 失去焦點-->
		<span id="userspan"></span>
		<br>
		輸入密碼:<input type="password" name="psw" onblur="checkPsw()">
		<span id="pswspan"></span>
		<br>
		確認密碼:<input type="password" name="repsw" onblur="checkRepsw()">
		<span id="repswspan"></span>
		<br>
		郵件地址:<input type="text" name="mail" onblur="checkMail()">
		<span id="mailspan"></span>
		<br>
		<input type="submit" value="提交">
	</form>
	<hr>
	<!--自訂義提交按鈕-->
	<input type="button" value="提交按鈕" onclick="submitBut()">
</body>
</html>