利用HTML,CSS,JS进行注册页面的制作

最新推荐文章于 2024-04-30 07:44:17 发布

华丽的臻丶

最新推荐文章于 2024-04-30 07:44:17 发布

阅读量954

点赞数 1

分类专栏： html应用实战文章标签： html css js

本文链接：https://blog.csdn.net/hualidezhen/article/details/115185230

版权

HTML CSS JavaScript 表单验证注册页面

关键词由CSDN通过智能技术生成

html应用实战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用HTML,CSS,JS进行注册页面的制作

上一篇发表的只是登录注册项目的一半，这章为注册页面，相比较与登录页面，注册页面的功能相对更多，内容更加丰富一些，比较完善，更加像一个正常网站用到得一个注册页面，比如，我在每一个注册内容面前加了验证，对注册的用户名，密码，电话号码等进行了

规范处理，添加了限制条件，让其更加真实接近正常的注册页面
注册页面的html源代码：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <style>
        body{
            font-size: 20px;
            font-family: Verdana;
            background-color: #B4D5FF;
        }
        table{
            background-color: #B4D5FF;
            width: 500px;
            margin: auto;
            line-height: 30px;
        }
        .test{
            border: 1px solid #F3F9FF;
            border-radius:20px;
        }
        .left{	
            width: 170px;
        }
        table td{
            text-align: left;
        }
        .btn{
            width:70px;
            height:30px;
            color:blue;
            font-size:28sp;
            border:1px solid yellow;
            border-radius:20px;
        }
        .btn:hover{   
            background: #cccccc;  
            color: #000000;   
            cursor: pointer;
        } 
        
        .btn:LINK .btn:VISITED{
        background-color: #148D08;
        }
        .btn:HOVER{
        background-color: #148D08;
        cursor: pointer;
        }
        
        span{
            color:red;
        }
    </style>
    <script type="text/javascript">
        function checkRegister(form){
            //验证昵称 根据name属性取组件
            var name=form.userName.value.trim();
            if(name==""||name==null){
                alert("请输入用户名");
                return false;
            }
            var pwd =form.userPwd.value;
            var repwd =form.reUserPwd.value;
            if(pwd==""||pwd==null)
                {
                alert("请输入密码");
                return false;
                }else if(pwd.length>10||pwd.length<6){
                    alert("密码长度不合规")
                    return false;
                }else if(pwd!=repwd){
                    alert("两次密码输入不一致");
                    return false;
                }
            var gender=form.gender.value;
            if(gender=="")
                {
                alert("性别不能为空");
                return false;
                }
            var phone=form.phone.value;
            var reg=/^1[3|4|5|8|7|9][0-9]\d{8}$/;
            if(phone=="")
                {
                alert("电话号码不能为空");
                return false;
                }
            else if(phone.length>11||phone.length<11){
                alert("电话号码长度不合规");
                return false;
            } else if(!reg.test(phone)){
                alert("电话号码格式不对");
                return false;
            }
            var email=form.email.value;
            var reg1=/^[a-z][\w]*@[\w]+\.[a-z]{2,3}/i;
            if(email==""||email==null)
                {
                alert("请输入邮箱信息");
                return false;
                }
            else if(!reg1.test(email))
                {
                alert("邮箱格式不对");
                return false;
                }
            return true
        }
        </script>
</head>
<body>
    <h1>欢迎注册</h1>
	<hr>
	<form action="5-pritices-邮箱登录.html" method="get" onsubmit=" return checkRegister(this)">
	<table>
		<tr><td class="left">昵称<span>*</span></td>
		<td><input class="test" type="text" name="userName" id="Name"></td></tr>
		<tr><td>密码<span>*</span></td><td><input class="test" type="password" name="userPwd" id="Pwd"></td></tr>
		<tr><td>再次确认密码<span>*</span></td><td><input class="test" type="password" name="reUserPwd"/></td></tr>
		<tr><td>性别<span>*</span></td><td><input type="radio" name="gender" value="male"/>男
							<input type="radio" name="gender" value="female">女</td></tr>
		<tr><td>电话号码<span>*</span></td><td><input class="test" type="text" name="phone"></td></tr>
		<tr><td>邮箱</td><td><input class="test" type="text" name="email"></td></tr>
		<tr><td>个人爱好</td>
		<td><input type="checkbox" value="baskball" name="hobby">篮球
			<input type="checkbox" value="football" name="hobby">足球
			<input type="checkbox" value="chat" name="hobby">聊天
			<input type="checkbox" value="music" name="hobby">音乐
		</td></tr>
		<tr><td>来自哪里<span>*</span></td>
			<td><select name="address">
			<option value="0">北京</option>
			<option value="1">上海</option>
			<option value="2">南京</option>
			<option value="3">广东</option>
		</select></td>
		</tr>
		<tr><td>备注</td>
		<td><textarea cols="30" rows="5" class="test">
			</textarea></td></tr>
		<tr><td></td><td><input type="reset" value="重置" class="btn">
		<input type="submit" value="注册" class="btn"></td></tr>
	</table>
	</form>
</body>
</html>