web前端案例二：简单的注册页面(有表单验证)

最新推荐文章于 2023-06-16 22:15:00 发布

知足Content+

最新推荐文章于 2023-06-16 22:15:00 发布

阅读量5.5k

点赞数 4

分类专栏： web前端文章标签： html js css

本文链接：https://blog.csdn.net/weixin_44197120/article/details/113279354

版权

web前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

效果图

在这里插入图片描述

用到的图片

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("../image/register_bg.png") no-repeat center;
        }

        *{
            margin:0px;
            border:0px;
            box-sizing: border-box;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 10px solid #EEEEEE;
            background: white;
            margin: auto;
            margin-top: 30px;
            padding: 20px;
        }
        .rg_left{
            float: left;
            margin: 15px;
        }
        .rg_left > p:first-child{
            color:#FFD026;
            font-size: 20px;
        }
        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;
        }
        .rg_center{
            width: 500px;
            float: left;
        }
        .rg_right{
            float: right;
            margin:10px;
        }
        .rg_right > p:last-child{
            font-size: 5px;
        }
        .rg_right p a {
            color: pink;
        }
        .td_left{
            text-align: right;
            width: 100px;
            height: 50px;
        }
        .shurukuang,#birthday,#register{
            margin-left: 30px;
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #register{
            width: 150px;
        }
        #xingbie{
            padding-left: 30px;
        }
        #jpg_code{
            width: 90px;
            height: 32px;
            border-radius: 5px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }
        #bt_zhuce{
            padding-left: 135px;
        }
        .error{
            color: red;
            font-size: 10px;
        }

    </style>
    <script>
        //给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果

        //定义一些方法分别校验各个表单项
        window.onload = function(){
            document.getElementById("form").onsubmit=function(){

                var flag1=checkusername();
                var flag2=checkpassword();
                var flag3=checktel();
                var flag4=checkemail();
                var flag5=checkname();
                return flag1&&flag2&&flag3&&flag4&&flag5;
            }
            //给用户名和密码框分别绑定离焦事件
            document.getElementById("username").onblur = checkusername;
            document.getElementById("password").onblur = checkpassword;
            document.getElementById("email").onblur = checkemail;
            document.getElementById("tel").onblur = checktel;
            document.getElementById("name").onblur = checkname;
        }

        function checkpassword(){
            let password = document.getElementById("password").value;
            var reg_password=/^\w{6,12}$/;
            var flag_password =reg_password.test(password);
            var s_password = document.getElementById("s_password");
            if(flag_password){
                s_password.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_password.innerHTML="密码在6-12位之间";
            }
            return flag_password;
        }
        function checkusername(){
            let username = document.getElementById("username").value;
            var reg_username=/^\w{6,12}$/;
            var flag_username =reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if(flag_username){
                s_username.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_username.innerHTML="用户名长度在6-12位";
            }
            return flag_username;
        }
        function checkemail(){
            let email = document.getElementById("email").value;
            var reg_email=/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$/;
            var flag_email =reg_email.test(email);
            var s_email = document.getElementById("s_email");
            if(flag_email){
                s_email.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_email.innerHTML="邮箱格式有误";
            }
            return flag_email;
        }
        function checktel(){
            let tel = document.getElementById("tel").value;
            var reg_tel=/^\d{11}$/;
            var flag_tel =reg_tel.test(tel);
            var s_tel = document.getElementById("s_tel");
            if(flag_tel){
                s_tel.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_tel.innerHTML="手机号需要11位数字";
            }
            return flag_tel;
        }
        function checkname(){
            let name = document.getElementById("name").value;
            var reg_name=/^\w{6,12}$/;
            var flag_name =reg_name.test(name);
            var s_name = document.getElementById("s_name");
            if(flag_name){
                s_name.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
            }else{
                s_name.innerHTML="请填写6-12位字符";
            }
            return flag_name;
        }

    </script>
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div  class="rg_center">
            <form action="#" id="form" method="get">
                <table>

                    <tr>
                        <td class="td_left">用户名</td>
                        <td><input type="text" class="shurukuang" id="username" placeholder="请输入用户名"> </td>
                        <td><span id="s_username" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">密码</td>
                        <td><input type="text" class="shurukuang" id="password" placeholder="请输入密码"> </td>
                        <td><span id="s_password" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">Email</td>
                        <td><input type="text" class="shurukuang" id="email" placeholder="请输入邮箱账号"> </td>
                        <td><span id="s_email" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">姓名</td>
                        <td><input type="text" class="shurukuang" id="name" placeholder="请输入真实姓名"> </td>
                        <td><span id="s_name" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">手机号</td>
                        <td><input type="text" class="shurukuang" id="tel" placeholder="请输入手机号"> </td>
                        <td><span id="s_tel" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</td>
                        <td  id="xingbie"><input type="radio" name="gender" id="male"> 男
                            <input type="radio" name="gender" id="female"> 女</td>

                        <td><span id="s_sex" class="error"></span></td></tr>
                    <tr>
                        <td class="td_left">出生日期</td>
                        <td><input type="date" id="birthday"> </td>
                        <td><span id="s_date" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">验证码</td>
                        <td><input type="text"  id="register" width="100px" height="30px">
                            <img src="../image/verify_code.jpg" id="jpg_code"></td>
                        <td><span id="s_yanzheng" class="error"></span></td>
                    </tr>
                    <tr>
                        <td  colspan="2" id="bt_zhuce"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>
            </form>

        </div>
        <div  class="rg_right">
            <p>已有帐号？<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>

遇到的问题

邮箱的正则表达式自以为写得没错，但还是出错
取id名有些混乱，导致后面编写有些困难

知足Content+

关注

4
点赞
踩
89

收藏

觉得还不错? 一键收藏
1
评论
web前端案例二：简单的注册页面(有表单验证)

效果图用到的图片代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册页面</title> <style> body{ background: url("../image/register_bg.png") no-repeat center;
复制链接

扫一扫