DHTML(Dynamic HTML)--4.表單(form)的校驗與提交

1.當輸入格式全部正確時,註冊成功

2.只要有一個格式錯誤,將不能提交表單



代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		
		<script type="text/javascript">
			function check(name,errorId,reg,info){
				var oUserNode=document.getElementsByName(name)[0];
				var strName=oUserNode.value;
				
				var oSpanNode=document.getElementById(errorId);
				//用正則表達式校驗
			/*	var reg=/^hncu/i; */
				if(reg.test(strName)){
					oSpanNode.innerHTML=(info+"格式正確").fontcolor("green").bold();
					return true;
				}else{
					oSpanNode.innerHTML=(info+"用戶名格式錯誤").fontcolor("red").bold();
					return false;
				}
			}
			
			function checkUser(){
				var reg=/^hncu/;
				return check("user","userspan",reg,"用戶名");
			}
			
			function checkPwd(){
				var reg=/\d{6}/;
				return check("pwd","pwdspan",reg,"密碼");
			}
			
			function checkPwd2(){
				var strPwd1=document.getElementsByName("pwd")[0].value;
				var strPwd2=document.getElementsByName("pwd2")[0].value;
				var pwdNode=document.getElementById("pwdspan2");
				if(strPwd1==strPwd2){
					pwdNode.innerHTML="兩次密碼輸入一致".fontcolor("green").bold();
					return true;
				}else{
					pwdNode.innerHTML="兩次密碼輸入不一致".fontcolor("red").bold();
					return false;
				}
			}
			
			function checkMail(){
				var reg=/\w+@\w+(\.\w+)+/;
				return check("mail","mailspan",reg,"郵箱地址");
			}
			
			/*
				訪問表單組件的兩種簡便方式:
					1)使用表單組件的id去訪問
					2)使用標籤名直接當該對象的數據進行訪問	document.forms[i]
			*/
			function mySubmit(){
				if(checkUser() && checkPwd() && checkPwd2() && checkMail()){
					regForm.submit();
					//document.forms[0].innerHTML
					alert("註冊成功");
				}
			}
			
		</script>
	</head>
	<body οnmοusemοve="show_coords(event);">
		<h1>用戶註冊</h1>
		<form id="regForm" action="">
			<table>
				<tr> <td>用戶名稱:</td> <td><input type="text" name="user" οnblur="checkUser();" /></td> 	<td><span id="userspan"></span></td> </tr>
				<tr> <td>用戶密碼:</td> <td><input type="password" name="pwd" οnblur="checkPwd();" /></td>   <td><span id="pwdspan"></span></td> </tr>
				<tr> <td>確認密碼:</td> <td><input type="password" name="pwd2" οnblur="checkPwd2();"/></td>   <td><span id="pwdspan2"></span></td> </tr>
				<tr> <td>郵箱地址:</td> <td><input type="text" name="mail" οnblur="checkMail();" /></td>   	<td><span id="mailspan"></span></td> </tr>
				<tr> <td colspan="3"><input type="button" value="註冊" οnclick="mySubmit();"></td>	</tr>
			</table>
		</form>
	</body>
</html>


發佈了102 篇原創文章 · 獲贊 89 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章