>>> 本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。
要求
创建一个注册页面,如下图。
然后再对注册信息进行判断,判断其是否符合要求。(如:密码6-12位字符,不能有空格等)
图片素材如下:
注册页面的整个框架
注册页面框架分析
页面内容主要分为三个部分:
我们可以使用三个块标签,可以将这三个部分分别放到每个块标签中。
注册页面框架的实现
第一部分:两个段落文本
<!-- 左边部分 -->
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
第二部分:一个表单
<!-- 中间部分 -->
<div class="rg_center">
<!-- 定义表单 form -->
<form action="#" method="post">
<!-- 定义一个表格 -->
<table>
<!-- 表格第一行有两个单元格:用户名 + 输入用户名信息区域 -->
<tr>
<!-- 定义一个标签:用户名 -->
<td class="td_left"><label for="username">用户名</label></td>
<!-- 定义输入用户名信息的框框 -->
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<!-- 表格第二行有两个单元格:密码 + 输入密码区域 -->
<tr>
<!-- 定义一个标签:密码 -->
<td class="td_left"><label for="password">密码</label></td>
<!-- 定义输入密码的框框 -->
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<!-- 表格第三行有两个单元格:邮箱 + 输入邮箱区域 -->
<tr>
<!-- 定义一个标签:邮箱 -->
<td class="td_left"><label for="email">Email</label></td>
<!-- 定义输入邮箱的框框 -->
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<!-- 表格第四行有两个单元格:姓名 + 输入姓名区域 -->
<tr>
<!-- 定义一个标签:姓名 -->
<td class="td_left"><label for="name">姓名</label></td>
<!-- 定义输入姓名的框框 -->
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<!-- 表格第五行有两个单元格:手机号 + 输入手机号码区域 -->
<tr>
<!-- 定义一个标签:手机号 -->
<td class="td_left"><label for="tel">手机号</label></td>
<!-- 定义输入手机号码的框框 -->
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<!-- 表格第六行有两个单元格:性别 + 选择性别的按钮 -->
<tr>
<!-- 定义一个标签:性别 -->
<td class="td_left"><label>性别</label></td>
<
文章评论