<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">

.msyhbd{
font-weight:bold;
font-family:"微软雅黑","SimSun";
}
.msyh{
font-family:"微软雅黑","SimSun";
}
h1{
text-align:center;
}
#err_name{
color:white;
}
#err_age{
color:red;
}
#err_hobby{
color:white;
}
</style>
<script type="text/javascript">
function checkName(){
	name=document.getElementById("tx_name").value;
	err_name=document.getElementById("err_name")
	if(name.length<2){

		err_name.style.color="red";
		return false;
	}

	err_name.style.color="white";
	return true;
}
function checkAge(){
	age=document.getElementById("tx_age").value;
	err_age=document.getElementById("err_age")
	if(age.length!=2){
		err_age.innerHTML="年龄必须为两位的数字!";
		return false;
	}
	if(age<18 || age>30){
		err_age.innerHTML="年龄应该在 18~30 之间!";
		return false;
	}
	err_age.innerHTML="";
	return true;
}
function checkHobby(){
	var num=0;
	err_hobby=document.getElementById("err_hobby")
	hobbies=document.getElementsByClassName("chk");
	for(i=0;i<5;i++){
		if(hobbies[i].checked)num++;
	}
	if(num==0){
		err_hobby.style.color="red";
	}else{
		err_hobby.style.color="white";
	}
	return num;
}
function check(){
	var ac=true;
	if(checkName()==false) ac=false;
	if(checkAge()==false) ac=false;
	if(checkHobby()==0) ac=false;
	return ac;
}
</script>
<title>信息统计表</title>
</head>
<body class="msyh">
<h1 class="msyh">信息统计表</h1>
<form action="success.html" method="post"  onsubmit="return check()">
	<table>
	<tr>
		<td class="msyhbd">姓名:</td><td><input type="text" id="tx_name"></td><td id="err_name">姓名不能为空,长度大于2!</td>
	</tr>
	<tr>
		<td class="msyhbd">年龄:</td><td><input type="text" id="tx_age"></td><td id="err_age"></td>
	</tr>	
	<tr>
		<td class="msyhbd">性别:</td>
		<td>
			<input type="radio" name="sex"><input name="sex" type="radio"></td>
	</tr>	
	<tr>
		<td class="msyhbd">学历:</td>
		<td><select>
<option value ="sel">--请选择--</option>
  <option value ="xx">小学</option>
  <option value ="zx">中学</option>
  <option value="zk">专科</option>
  <option value="bk">本科</option> 
   <option value="ss">硕士</option>
  <option value="bs">博士</option>
		</select></td>
	</tr>	
	<tr>
		<td class="msyhbd">爱好:</td>
		<td>
		<p><input type="checkbox" class="chk">旅游</p>
		<p><input type="checkbox" class="chk">登山</p>
		<p><input type="checkbox" class="chk">健身</p>
		<p><input type="checkbox" class="chk">上网</p>
		<p><input type="checkbox" class="chk">游泳</p>
		<p id="err_hobby">至少要选择一项爱好!</p>
		</td>
	</tr>
	<tr>
		<td class="msyhbd">自我介绍:</td><td><input type="text" value="自我介绍:"></td>
	</tr>
	<tr>
		<td></td>
		<td>
		<input type="submit" value="提交">
		<input type="button" value="重置">
		</td>
	</tr>
	</table>
</form>

</body>
</html>