用html开发一个注册页面,检验注册格式是否正确。
Register.html
<html>
<head>
<style type="text/css">@import url(Css.css);</style>
<script language="javascript" src="check.js"></script>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="textml; charset=UTF-8">
<title>注册页面</title>
</head>
<body>
<form action="">
<table border="0" align="center"width="600">
<tr><td colspan="3" align="center" height="40"id="title">填写注册信息</td></tr>
<tr><td align="right" id="t">用户名:*</td>
<td><input type="text" name="username"/></td>
<td id="i">用户名由字母开头,后跟字母、数字或下划线!</td>
</tr>
<tr><td align="right" id="t">密码:*</td>
<td><input type="password" name="userpwd"/></td>
<td id="i">设置登录密码,至少六位!</td>
</tr>
<tr><td align="right" id="t">确认密码:*</td>
<td><input type="password" name="userpwd1"/></td>
<td id="i">请在输入一次你的密码!</td>
</tr>
<tr><td align="right" id="t">性别:*</td>
<td><input type="radio"name="usersex"value="男" checked/>男
<input type="radio" name="usersex" value="女"/>女</td>
<td id="i">请选择你的性别!</td>
</tr>
<tr><td align="right" id="t">年龄:*</td>
<td><input type="text" name="userage"/></td>
</tr>
<tr><td align="right" id="t">邮箱地址:*</td>
<td><input type="text" name="useremail"/>
</td>
</tr>
<tr><td align="right" valign="top">基本情况:*</td>
<td colspan="2">
<textarea name="userbasicinfo"rows="5" cols="50"></textarea>
</td>
</tr>
<tr><td colspan="3"align="center" height="40">
<input type="Button" value="确认" onClick="validate()"/>
<input type="reset"value="取消"/>
</td>
</tr>
</table>
</form>
</html>
Check.js
function validate(){
var pwd=document.forms[0].userpwd.value;
var pwd1=document.forms[0].userpwd1.value;
var age=document.forms[0].userage.value;
if(pwd.length<6)alert("密码长度必须大于等于6!");
else if(pwd!=pwd1)alert("两次密码不一致!");
else if(age<18||age>100)alert("年龄范围应该为18岁至100岁!")
else document.forms[0].submit();
}
CSS.css
@CHARSET "UTF-8";
<style type="text/css">
#title{color:#FF7B0B;font-size:20px;font-weight:bod;}
#i{width:352px;height:15px;color:blue;font-size:12px;}
table{text-align:left;}
#t{text-align:right;}
</style>>
实验截图: