前端开发 | 在线支持

使用HTML5的新表单元素打造一个注册页面，该页面将应用新的表单元素及表单的输人验证。通过本上机实践，使读者能够熟练掌握HTML5中新增表单元素的应用，以及表单验证方法的使用。

一个相对完善的注册页面应该提供用户身份信息和用户个人信息两种用户信息。用户登录信息包括用户名、密码、邮箱。用户身份信息包括姓名、性别、出生年月日、住址等。同时对于用户各个输人信息来说，还应该进行输人合法性的校验。根据如上分析，先使用HTML5表单原色设计页面基本结构。然后添加各表单验证方法。

【示例】

HTML

<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>
                    <tr>
                        <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">*</font> <span id="pswInfo"></span></td>
                    </tr>
                </table>
            </div>
            <div style="margin-top:10px;margin-bottom:20px">
                <h3>用户基本信息</h3>
                <table width='100%'>
                    <tr>
                        <td width='20%'>性别</td>
                        <td width='40%'><select id="gender">
                                <option value="男">男</option>
                                <option value="女">女</option>
                                <option value="其他">其他</option>
                            </select></td>
                        <td width='20%'> </td>
                    </tr>
                    <tr>
                        <td>出生年月</td>
                        <td><input id="birth" type="date" /></td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>住址</td>
                        <td><input id="address" type="text"/></td>
                        <td> </td>
                    </tr>
                </table>
            </div>
            <input type="submit" value="注册新用户" onclick="reg()">
            <input type="reset" value="重置">
        </center>
    </fieldset>
</form>

JS

//验证密码强度
function checkStrength()
{
	var strength = document.getElementById("strength");
	var psw1 = document.getElementById("psw1").value;
	var length = psw1.length;
	if (length>=1&&length<3)
	{
		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)
	{
		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()
	)
	{
		alert(
			'确认注册信息\n'+
			'用户名：'+username+'\n'+
			'电子邮箱：'+email+'\n'+
			'性别：'+gender+'\n'+
			'生日：'+birth+'\n'+
			'住址：'+address+'\n'
		)	
	}
}

下载源代码