<!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>