js實現註冊、二級聯動

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊</title>
<style type="text/css">
.bigdiv {
	border: 1px solid red;
	width: 90%;
}

.logodiv {
	border: 1px solid red;
	width: 33%;
	float: left;
	height: 70px;
}

.clear {
	clear: both;
}
</style>

<script>
	function tips(id, conent) {
		document.getElementById(id + "span").innerHTML = "<font color=red>"
				+ conent + "</font>";
	}
	//function check(){
	//	document.getElementById("namespan").innerHTML="<font color=green>用戶名正確 !</font>";
	//}
	function checkform() {
		var usename = document.getElementById("usename").value;
		if (usename == "") {
			document.getElementById("namespan").innerHTML = "<font color=green>用戶名不能爲空!</font>";
			return false;
		}
		var password = document.getElementById("password").value;
		if (password == "") {
			alert("密碼不能爲空!");
			return false;
		}
		var repassword = document.getElementById("repassword").value;
		if (repassword != password) {
			alert("密碼不一致!");
			return false;
		}
		var email = document.getElementById("email").value;
		if (password == "") {
			alert("郵箱輸入不正確!");
			return false;
		}
	}
	
function changeprivc(){
	
	var privc=document.getElementById("privc").value;
	var city=document.getElementById("city");
	for(var i=city.options.length;i>0;i--){
		city.options[i]=null;
	}
	var array=new Array(3);
	array[0]=new Array("鄭州","南陽","開封","商丘");
	array[1]=new Array("南京","蘇州","無錫","義烏");
	array[2]=new Array("西安","咸陽","華山","長安");
	
	for(var i=0;i<array.length;i++){
		if(i==privc){
			for(var j=0;j<array[i].length;j++){
				var opt=document.createElement("option");
				var txt=document.createTextNode(array[i][j]);
				opt.appendChild(txt);
				city.appendChild(opt);
			}
		}
	}
	
	
}
</script>
</head>
<body>
	<div class="bigdiv">
		<div>
			<div class="logodiv">
				<img src="image/0.png" width="100%" />
			</div>
			<div class="logodiv">
				<img src="image/1.png" width="100%" />
			</div>
			<div style="padding-top: 20px; height: 50px;">
				<a href="#">登陸</a>  <a href="註冊.html">註冊</a>  <a href="#">購物車</a>
			</div>
			<div class="clear"></div>
		</div>
		<div style="height: 500px; background-image: url(image/ad.png);">
			<div
				style="border: 2px solid blue; position: absolute; left: 300px; top: 200px; background-color: white;">
				<form action="主頁2.html" method="post" οnsubmit="return checkform()">
					<table cellpadding=10px>
						<tr>
							<td>用戶名</td>
							<td><input type="text" name="name" id="usename"
								οnfοcus="tips('name','用戶名由字母和數字組成')" οnblur="check()"><span
								id="namespan"></span></td>
						</tr>
						<tr>
							<td>密碼</td>
							<td><input type="password" name="password" id="password"
								οnfοcus="tips('password','密碼由數字組成')"><span
								id="passwordspan"></span></td>
						</tr>
						<tr>
							<td>確認密碼</td>
							<td><input type="text" name="repassword" id="repassword"
								οnfοcus="tips('repassword','密碼由數字組成')"><span
								id="repasswordspan"></span></td>
						</tr>
						<tr>
							<td>郵箱</td>
							<td><input type="email" name="email" id="email"></td>
						</tr>
						<tr>
							<td>籍貫</td>
							<td><select  id="privc"  οnchange="changeprivc()">
							        <option>--請選擇--</option>
									<option value="0">河南省</option>
									<option value="1">江蘇省</option>
									<option value="2">陝西省</option></select> 
								<select id="city"><option>--請選擇--</option>
							</select></td>
						</tr>
						<tr>
							<td>愛好</td>
							<td><input type="checkbox" name="intest" value="">籃球<input
								type="checkbox" name="intest">羽毛球<input type="checkbox"
								name="intest">乒乓球</td>
						</tr>
						<tr>
							<td colspan="2" align="center"><input type="submit"
								value="註冊"></td>

						</tr>
					</table>
				</form>
			</div>
		</div>
		<div style="width: 100%; border: 1px solid blue;">
			<img src="image/5.png" width="100%">
		</div>
		<div style="height: 30px; margin-top: 10px; border: 1px solid blue;">
			<center>
				<a href="">關於我們  </a> <a href="">聯繫我們 </a> <a href="">招賢納士</a><a
					href=""> 友情鏈接</a>
			</center>
		</div>
	</div>

</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章