当前位置：
文档之家› HTML5上机实践——设计注册页面
HTML5上机实践——设计注册页面
strength.innerHTML="弱"; } else if(length>=3&&length<6) {
strength.innerHTML="中";
else {
strength.innerHTML="强"; } } //验证两次输入密码是否一致 function checkPSW() { var psw1 = document.getElementById("psw1").value; var psw2 = document.getElementById("psw2").value; var pswInfo = document.getElementById("pswInfo"); if(psw1!=psw2) {
第3章 HTML5的表单
3.1 新的input输入类型及属性 3.2 表单的验证方式 3.3 上机实践——设计注册页面
3.3 上机实践——设计注册页面
3.3.1 实践目的 使用HTML5的新表单元素打造一个注册页面，该页面将应用新的表单元素及表单的输入验证。通过本上机实 践，读者能够熟练掌握HTML5中新增表单元素的应用，以及表单验证方法的使用。 3.3.2 设计思路 一个相对完善的注册页面应该提供用户身份信息和用户个人信息两种用户信息。用户登录信息包括用户名、 密码、邮箱，用户身份信息包括姓名、性别、出生年月日、住址等。同时对于用户各个输入信息，还应该进 行输入合法性的校验。 根据以上分析，我们设定设计步骤如下。 （1）使用HTML5表单原色设计页面基本结构。 （2）添加各表单验证方法。 3.3.3 实现过程 根据上面的分析，我们设计代码如下。
<!DOCTYPE html> <html> <meta charset="gb2312" /> <script> //验证密码强度 function checkStrength() {
var strength = document.getElementById("strength"); var psw1 = document.getElementById("psw1").value; var length = psw1.length; if (length>=1&&length<3) {
pswInfo.innerHTML='两次输入的密码必须一致'; } } //注册方法
function reg() {
var username = document.getElementById("username").value; var email = document.getElementById("email").value; var gender = document.getElementById("gender").value; var birth = document.getElementById("birth").value; var address = document.getElementById("address").value; if(document.getElementById("username").checkValidity()//判断用户名是否通过校验 &&document.getElementById("psw1").checkValidity()//判断密码是否通过校验 &&document.getElementById("psw2").checkValidity()//判断重复密码是否通过校验 &&document.getElementById("email").checkValidity()//判断电子邮箱是否通过校验 &&document.getElementById("birth").checkValidity()//判断生日是否通过校验 &&document.getElementById("address").checkValidity()//判断地址是否通过校验 ) {
<td>邮箱</td> <td><input id="email" type="email" required="true"/></td> <td><font color="red">*</font></td>
</tr> <tr>
<td>密码</td> <td><input id="psw1" type="password" required="true" onkeyup= "checkStrength()"/></td> <td><font color="red">*</font> <span id="strength"></span></td> </tr> <tr> <td>确认密码</td> <td><input id="psw2" type="password" required="true" onblur=" checkPSW()"/></td> <td><font color="red">*</fonБайду номын сангаас> <span id="pswInfo"></span></td> </tr> </table> </div>
alert( '确认注册信息\n'+ '用户名：'+username+'\n'+
'生日：'+birth+'\n'+ '住址：'+address+'\n' ) } } </script> <form> <fieldset> <legend>用户注册页面</legend> <center> <div style="padding:5px;width=600px"> <h4>用户登录信息</h4> <table width='100%'> <tr> <td width='20%'>用户名</td> <td width='40%'><input id="username" type="text" required="true"/></td> <td width='40%'><font color="red">*</font></td> </tr>
