简单注册页面【表单验证，DOM实现select联动】

一个简单的注册页面

用到的语言：HTML5，CSS3，JavaScript
【JS在验证submit的方法上有些不足，待优化！！！】
效果预览：

1. 初始效果
   
2. 填写正确后效果
   
   JavaScript代码：

<script type="text/javascript">
	/*分别给每个input设置信号变量来判断表单状态*/
	var emailflag = false;
	var usernameflag = false;
	var passwordflag = false;
	var repasswordflag = false;
	/*测试Email的正确性*/
	var checkEmail = function(){
		/*定义正则表达式*/
		var checkEmailRegExp = /[0-9]{5,8}@[0-9a-zA-z]{2,4}.com/; //匹配5-8位数字+@+2位字母+.com
		/*获取表单的值*/
		var email = document.getElementById("Email").value;
		/*获取span来显示验证结果*/
		var inform = document.getElementById("emialchecker");
		if(checkEmailRegExp.test(email)){
			emailflag = true;
			/*设置正确情况下的验证信息*/
			inform.innerText="正确";
			/*设置颜色*/
			inform.style.color="blue";
			/*设置粗体*/
			inform.style.fontWeight="bold";
			/*设置背景色*/
			inform.style.backgroundColor="white";
		}else{
			/*设置错误情况下的验证信息*/
			inform.innerText="格式错误！正确格式为：[0-9]{5,8}@[0-9a-zA-z]{2,4}.com";
			inform.style.color="red";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}
		/*测试是否能点击提交*/
		checksubmit();
	}
	/*对用户名表单进行验证*/
	var checkUsername = function(){
		/*获取用户名的值*/
		var username = document.getElementById("username").value;
		var inform = document.getElementById("usernamechecker");
		/*创建正则表达式*/
		var checkUsernameRegExp = /[(*|&|^|@|~|`)]{1,}/;   //匹配铭感字符* & ^ @ ~ `
		if(username == null){
			inform.innerText="请输入用户名";
			inform.style.color="red";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}else if(checkUsernameRegExp.test(username)){
			inform.innerText="包含非法字符";
			inform.style.color="red";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}else{
			usernameflag = true;
			inform.innerText="正确";
			inform.style.color="blue";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}
		checksubmit();
	}
	/*对密码格式进行验证*/
	var checkPassword = function(){
		/*获取密码的值*/
		var password = document.getElementById("upassword").value;
		var inform = document.getElementById("passwordchecker");
		/*创建正则表达式，1-10位纯数字或纯字母或数字字母组合*/
		var passwordRegExp = /[(\d|a-zA-z)]{1,10}/;
		if(password == null){
			inform.innerText="请输入密码";
			inform.style.color="red";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}else if(!passwordRegExp.test(password)){
			inform.innerText="包含非数字或非字母或超过十位";
			inform.style.color="red";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}else{
			passwordflag = true;
			inform.innerText="正确";
			inform.style.color="blue";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}
		checksubmit();
	}
	/*对确认密码表单的验证*/
	var checkRepassword = function(){
		/*获取确认密码的值*/
		var repassword = document.getElementById("repassword").value;
		/*获取密码的值*/
		var password = document.getElementById("upassword").value;
		var inform = document.getElementById("repasswordchecker");
		/*若两个密码的值相等则正确*/
		if(repassword == password){
			repasswordflag = true;
			inform.innerText="正确";
			inform.style.color="blue";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}else{
			inform.innerText="与原密码不同";
			inform.style.color="red";
			inform.style.fontWeight="bold";
			inform.style.backgroundColor="white";
		}
		checksubmit();
	}
	/*对submit进行验证，若所有flag不全为true则submit不可点击，若都为true则可点击
	* 在每个验证方法中都调用了，这也是一个缺点，待优化！！！
	*/
	var checksubmit = function(){
		if(emailflag == true && usernameflag == true && passwordflag == true786 && repasswordflag == true)
			/*若都为true则设置属性disable值为false*/
			document.getElementById("submit").disabled=false;
		else
			/*若不都为true则设置属性disable值为true*/
			document.getElementById("submit").disabled=true;
	}
	/*两个select联动*/
	var selectOption = function(){
		/*获取第一个select【省份】*/
		var province = document.getElementById("province");
		/*获取第二个select【市】*/
		var city = document.getElementById("city");
		/*判断省份是否为四川*/
		if(province.value=="sichuan"){
			/*将选项全部清除*/
			city.options.length=0;
			/*添加option节点*/
			var SCcity1 = document.createElement("option");
			/*设置option的值*/
			SCcity1.innerText="成都";
			var SCcity2 = document.createElement("option");
			SCcity2.innerText="锦阳";
			var SCcity3 = document.createElement("option");
			SCcity3.innerText="德阳";
			/*在select后追加节点*/
			city.appendChild(SCcity1);
			city.appendChild(SCcity2);
			city.appendChild(SCcity3);
		/*判断省份是否为山西*/
		}else if(province.value=="shanxi"){
			city.options.length=0;
			var SXcity1 = document.createElement("option");
			SXcity1.innerText="太原";           
			var SXcity2 = document.createElement("option");
			SXcity2.innerText="大同";
			var SXcity3 = document.createElement("option");
			SXcity3.innerText="平遥";
			city.appendChild(SXcity1);
			city.appendChild(SXcity2);
			city.appendChild(SXcity3);
		}else{
			/*默认情况*/
			city.options.length=0;
			var  defaultcity = document.createElement("option");
			defaultcity.innerText="请选择";
			city.appendChild(defaultcity);
			}
		}
</script>

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册界面</title>
	</head>
	<body>
		<div align="center">
			<div id="container">
				<div id="head">
					<img src="img/head.jpg"/>
				</div>
				<table>
					<tr>
						<td class="attr">Email地址：</td>
						<td>
							<input type="text" id="Email" value="" onblur="checkEmail()" />
						</td>
						<td>
							<span id="emialchecker">电子邮件是必填项，请输入您的Email地址</span>
						</td>
					</tr>
					<tr>
						<td class="attr">设置昵称：</td>
						<td>
							<input type="text" id="username" value="" onblur="checkUsername()" />
						</td>
						<td>
							<span id="usernamechecker">昵称为必填项，请输入您的昵称</span>
						</td>
					</tr>
					<tr>
						<td class="attr">设定密码：</td>
						<td>
							<input type="password" id="upassword" name="" onblur="checkPassword()" />
						</td>
						<td>
							<span id="passwordchecker">密码为必填项，请设置您的密码</span>
						</td>
					</tr>
					<tr>
						<td class="attr">再输入一次密码：</td>
						<td>
							<input type="password" id="repassword" name="" onblur="checkRepassword()" />
						</td>
						<td>
							<span id="repasswordchecker">请再次输入您的密码</span>
						</td>
					</tr>
					<tr>
						<td class="attr">性别：</td>
						<td colspan="2">
							<input type="radio" name="sex" id="man" value="" />男
							<input type="radio" name="sex" id="woman" value="" />女
						</td>
					</tr>
					<tr>
						<td class="attr">所在地区：</td>
						<td colspan="2">
							<select name="province" id="province" onmouseup="selectOption()">
								<option value="check">请选择</option>
								<option value="sichuan">四川</option>
								<option value="shanxi">山西</option>
							</select>
							<select name="city" id="city">
								<option value="">请选择</option>
							</select>
						</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2">
							<input type="submit" id="submit" value="提 交 注 册" />
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

CSS代码：

<style type="text/css">
	#container{
			position: relative;
			width: 780px;
		}
		#head{
			width: 780px;
		}
		.attr{
			text-align: right;
		}
		table{
			position: absolute;
			left:90px;
		}
		input{
			border: 1.5px grey solid;
			background-color: rgb(254,244,208);
		}
		span{
			background-color: rgb(254,244,208);
			color: red;
			font-size: 13px;
			border: 1px gray solid;
		}
		select{
			width: 100px;
		}
</style>

总结：

1. 在JS设置标签属性：变量名.style.属性名=值;
   eg. attr.style.color = "red";
2. 向标签中添加值：变量名.innerText=值;
   eg. document.getElementById("username").innerTest="Hello JS";
3. 创建结点：document.createElement();
   eg. var node1 = document.createElement("option");
4. 追加节点：appendChild();
   eg. node2.appendchild()
5. 清空option的值：select对象.option.length=0;
   eg. selects.option.length=0;
6. 对于各种验证方法都需要改进。