javascript表單賬戶密碼校驗提交

只會寫程式碼發表於2018-09-14
JavaScript密碼
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		span{color: red;font-size: 12px;display: none;}
	</style>
	<script type="text/javascript">
		/*
			表單提交:
				from 表單
					action     目標頁面的url      當提交成功時，跳轉的目標頁面
					method     get   post     網路提交方式
							例如：get    sucess.html?username='lili'&pwd='1231'
								  post   sucess.html 

					submit  提交
					onsubmit    return 語句;     若返回值為true或者 ""  均可以提交
			表單校驗：
		*/
	</script>
</head>
<body>
	<form action="sucess.html" method="post" onsubmit="return valForm()">
		使用者名稱:<input type="text" id="txt-name"><span id="tip-name">使用者名稱必須為8-12為字母或數字</span><br>
		密碼：<input type="password" id="pwd"><span id="tip-pwd">密碼必須為6位數字</span><br>	
		<input type="submit" value="提交">
	</form>

	<script type="text/javascript">
		//校驗使用者名稱密碼是否合法
		var iptName=document.getElementById('txt-name');
		var iptPwd=document.getElementById('pwd');
		var tipName=document.getElementById('tip-name');
		var tipPwd=document.getElementById('tip-pwd');

		//對使用者名稱和密碼進行校驗
		function valForm(){
			return valUserName()&&valPwd();
		}

		//校驗使用者名稱
		function valUserName() {
			var p=/^\w\w{7,11}$/;//使用者名稱必須為8-12為字母或數字
			var r=p.test(iptName.value);//校驗
			if(!r){
				//校驗不通過
				tipName.style.display='inline-block';//顯示
				iptName.focus();
				return false;
			}
			return true;
		}

		//校驗密碼
		function valPwd(){
			var p=/^\d\d{5}$/;//6位數字
			var r=p.test(iptPwd.value);//校驗
			if(!r){
				tipPwd.style.display='inline-block';
				iptPwd.focus();//獲取焦點
				return false;
			}
			return true;
		}
	</script>
</body>
</html>

 

相關文章