需求分析
- 首先做出简单的注册页面的模板,包括用户名、密码、手机号码、邮箱,其中用户名、密码、手机号码、邮箱通过正则表达式实现数据匹配。
- 用户名不能为空, 用户名不超过10个字符(字母、数字)。
- 密码不能为空,密码只能为4~14个数字。
- 手机号码不能为空,手机号码必须为11位,且第1位为1。
- 邮箱不能为空,邮箱地址无效。
- 当输入的数据匹配正确时,跳转到另一个页面,(显示输入的数据)。
注册表单效果图
代码如下
注册页面代码
<html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/></head><body><formid="form1"name="form1"method="post"action=""><tablewidth="500"border="1"align="center"cellpadding="0"><tr><tdheight="30"colspan="2"align="center">新用户注册</td></tr><tr><tdwidth="100"height="30"align="center">用户名</td><tdheight="30"><inputtype="text"name="ID"id="ID"/></td></tr><tr><tdwidth="10"height="30"align="center">密码</td><tdheight="30"><inputtype="password"name="PWD"id="PWD"/></td></tr><tr><tdwidth="100"height="30"align="center">手机号码</td><tdheight="30"><inputtype="text"name="PHONE"id="PHONE"/></td></tr><tr><tdwidth="100"height="30"align="center">邮箱</td><tdheight="30"><inputtype="text"name="EMAIL"id="EMAIL"/></td></tr><tdheight="30"colspan="2"align="center"><inputtype="submit"name="button"id="button"value="注册"/> <inputtype="reset"name="button2"id="button2"value="重置"/></td></tr></table></form></body></html>
跳转页面代码
<html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/></head><body><tablewidth="400"border="1"align="center"cellpadding="0"><tr><tdwidth="150"height="30"align="center">用户名</td><tdwidth="250"height="30"></td></tr><tr><tdwidth="150"height="30"align="center">密码</td><tdwidth="250"height="30"></td></tr><tr><tdwidth="150"height="30"align="center">手机号码</td><tdwidth="250"height="30"></td></tr><tr><tdwidth="150"height="30"align="center">邮箱</td><tdwidth="250"height="30"></td></tr></table></body></html>
实现效果
输入信息
点击注册按钮,验证信息(注册成功)
输入不正确的信息测试匹配效果
点击注册按钮,验证信息(注册失败,没有跳转到注册成功界面)