<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单注册</title>
<script type="text/javascript">
function checkUser(node)
{
var name=node.value;
var reg=/^[a-z_][\w\d_]+$/i;
var spanNode=document.getElementById('userspan');
if(reg.test(name))
{
spanNode.innerHTML="用户名正确".fontcolor('green');
}
else
{
spanNode.innerHTML="用户名错误".fontcolor('red');
}
}
function checkPsw(node)
{
var psw=node.value;
var reg=/^[\w\d_]{6,16}$/i;
var spanNode=document.getElementById('pswspan');
if(reg.test(psw))
{
spanNode.innerHTML="密码格式正确".fontcolor('green');
}
else
{
spanNode.innerHTML="密码格式错误".fontcolor('red');
}
}
function rcheckPsw(node)
{
var psw=document.getElementById("psw").value;//获取设置密码的值
if (psw=="")
{
document.getElementById("rpswspan").innerHTML="请先设置密码!".fontcolor('red');
return ;
}
var rpsw=node.value;
var spanNode=document.getElementById('rpswspan');
if(rpsw==psw)
{
spanNode.innerHTML="密码正确".fontcolor('green');
}
else
{
spanNode.innerHTML="请重新确认密码".fontcolor('red');
}
}
function tijiao()
{
if(document.getElementById("user").value==""){ alert("请填写用户名!"); return; }
if(document.getElementById("psw").value==""){ alert("请填写密码!"); return; }
if(document.getElementById("rpsw").value==""){ alert("请确认密码!"); return; }
if((form1.info[0].checked==false)&&(form1.info[1].checked==false)){ alert("请选择性别!"); return; }
if(document.getElementById("city").value=="none"){ alert("请选择城市!"); return; }
var flag=aihao();
if(flag==false) return;
if(document.getElementById("introduction").value==""){ alert("请填写个人简介!"); return; }
alert("已成功提交您的注册信息!"); return;
}
function aihao()
{
for(var i=0; i<9; i++)
{
if(form1.ho[i].checked==true) return true;
}
alert("请至少选择一个爱好!"); return false;
}
</script>
</head>
<body>
<!--
编写HTML注册表单, 需要:用户名, 密码, 确认密码, 性别,省份, 兴趣爱好,个人简介。
使用JavaScript验证这个HTML表单,要求:
用户名: 必须是字母数字或下划线,不能以数字开头。
密码: 6-16位字母数字下划线。
确认密码与设置的密码一致。
其他为必填项
-->
<form name="form1">
<div align="center">
<table style="border:3px red solid;width:200;height:100;" >
<tr>用户注册</tr>
<tr>
<th>用户名<font size="2" style="font-weight: normal;">(必须是6-16位字母数字或下划线)</font></th>
<th width="168"><div align="left">
<input type="text" name="user" id="user" οnblur="checkUser(this)"/>
<span id="userspan"> </span></div></th>
</tr>
<tr>
<th>请输入密码<font size="2" style="font-weight: normal;">(必须是6-16位字母数字或下划线)</font></th>
<th><div align="left">
<input type="password" name="psw" id="psw" οnblur="checkPsw(this)"/>
<span id="pswspan"> </span></div></th>
</tr>
<tr>
<th>请确认密码</th>
<th><div align="left">
<input type="password" name="rpsw" id="rpsw" οnblur="rcheckPsw(this)"/>
<span id="rpswspan"> </span></div></th>
</tr>
<tr>
<th>性别</th>
<th width="300"><div align="left">
<div>
<input type="radio" name="info" value="male"/><font style="font-weight: normal;">男</font>
<input type="radio" name="info" value="female"/><font style="font-weight: normal;">女</font>
</div></th>
</tr>
<tr>
<th>所在城市</th>
<th><div align="left">
<select name="city" id="city">
<option value="none">请选择城市</option>
<option value="ah">安徽</option>
<option value="bj">北京</option>
<option value="cq">重庆</option>
<option value="fj">福建</option>
<option value="gs">甘肃</option>
<option value="gd">广东</option>
<option value="gx">广西</option>
<option value="gz">贵州</option>
<option value="hain">海南</option>
<option value="hebei">河北</option>
<option value="hlj">黑龙江</option>
<option value="henan">河南</option>
<option value="hubei">湖北</option>
<option value="hunan">湖南</option>
<option value="js">江苏</option>
<option value="jx">江西</option>
<option value="jl">吉林</option>
<option value="ln">辽宁</option>
<option value="nx">宁夏</option>
<option value="nmg">内蒙古</option>
<option value="qh">青海</option>
<option value="sh">上海</option>
<option value="sx">山西</option>
<option value="sd">山东</option>
<option value="sc">四川</option>
<option value="sx3">陕西</option>
<option value="tj">天津</option>
<option value="xz">西藏</option>
<option value="xj">新疆</option>
<option value="yn">云南</option>
<option value="zj">浙江</option>
<option value="tw">台湾</option>
<option value="hk">香港</option>
<option value="mc">澳门</option>
<option value="else">其他</option>
</select>
</div>
</th>
</tr>
<tr>
<th>兴趣爱好</th>
<th><div align="left">
<input type="checkbox" name="ho" /> <font style="font-weight: normal;">运动
<input type="checkbox" name="ho" /> 看电影
<input type="checkbox" name="ho" /> 读书<br />
<input type="checkbox" name="ho" /> 画画
<input type="checkbox" name="ho" /> 唱歌
<input type="checkbox" name="ho" /> 编程 <br />
<input type="checkbox" name="ho" /> 旅游
<input type="checkbox" name="ho" /> 逛街
<input type="checkbox" name="ho" /> 其他</font>
</div>
</th>
</tr>
<tr>
<th>个人简介</th>
<th><div align="left"><input type="text" name="introduction" id="introduction" style="width:200px;height:100px"/></div></th>
</table>
<tr>
<td colspan="2" align="center">
<input name="按钮" type="button" οnclick="tijiao()" value="提交"/>
<input name="重置" type="reset" value="清空" />
</td>
</tr>
</div>
</form>
</body>
</html>
外观效果是:(但在这个页面里没有实现校验,把代码另存html文件就可以实现所有功能)