用户注册时表单的校验以及提交（css,html,javascript）

最新推荐文章于 2024-03-01 20:16:14 发布

兴奋の大公猴

最新推荐文章于 2024-03-01 20:16:14 发布

阅读量830

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_46274901/article/details/122646123

版权

img

http://note.youdao.com/noteshare?id=6024ce5a861417ffc854afa17cf5e35a

css

body{
    background: url("../img/register_bg.png") no-repeat;
    width: 200px;
    height: 200px;
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.regisit{

    height: 500px;
    width: 1000px;
    background-color: #fff;
    border: 5px solid #eeeeeec7;
    /* 让div水平居中 */
    
    margin-left: 250px;
    margin-top: 150px;
}
.rg_left{
    float: left;
    margin: 15px;
}
.rg_center{
    float: left;
    margin: 15px;
    width: 450px;
}
.rg_right{
    float: right;
    margin: 15px;
}
#p1{
    color:#FFFF00;
    font-size: 25px;
}
#p2{
    color:#D8D8D8;
    font-size: 25px;
}
.rg_right a{
    color: pink;
}
.td_left{
    width: 100px;
    text-align: right;
    height: 45px;
}
.td_right{
    padding-left: 50px;
}
#username,#password,#email,#name,#tel,#birthday{
    height: 32px;
    width: 251px;
    border: 1px solid #A6A6A6;
    /* 设置边框圆角 */
    border-radius: 5px;
    padding-left: 10px;
}
#code{
    height: 32px;
    width: 125px;
    /* 设置边框圆角 */
    border-radius: 5px;
    padding-left: 10px;
}
#img_code{
    height: 32px;
    /* 设置垂直居中 */
    vertical-align: middle;
}
#button_regisit{
    height: 40px;
    width: 150px;
   /* 设置边框圆角 */
   border-radius: 5px;
   background-color: #FFD026;
   border: 1px solid #FFD026;
   margin-left: 40px;
   margin-top: 35px;

}
.error{
    color: red;
}
#s_username{
    font-size: 10px;
    float: left;
}
#s_password{
    font-size: 10px;
    float: left;
}

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>
    <link rel="stylesheet" href="css/regisit.css">
</head>
<body>
    
    <div class="regisit">
        <!-- left -->
        <div class="rg_left">
            <p id="p1">新用户注册</p>
            <p id="p2">USER REGISTER</p>
        </div>

        <!-- center -->
        <div class="rg_center">
            <form action="#" method="get" id="form">
                <table align="center" >
                    <!-- 第一行 -->
                    <tr >
                        <td class="td_left">
                            <label for="username">用户名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" name="username" placeholder="请输入用户名" id="username">
                        </td>
                        <td>
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
        
                    <!-- 第二行 -->
                    <tr >
                        <td class="td_left">
                            <label for="password">密码</label>
                        </td>
                        <td class="td_right">
                            <input type="password" name="username" placeholder="请输入密码" id="password">
                        </td>
                        <td>
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>
        
                    <!-- 第三行 -->
                    <tr >
                        <td class="td_left">
                            <label for="email">Email</label>
                        </td>
                        <td class="td_right">
                            <input type="email" name="email" placeholder="请输入Email" id="email">
                        </td>
                    </tr>
        
                     <!-- 第四行 -->
                     <tr >
                        <td class="td_left">
                            <label for="name">姓名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" name="name" placeholder="请输入真实姓名" id="name">
                        </td>
                    </tr>
        
                    <!-- 第五行 -->
                    <tr >
                        <td class="td_left">
                            <label for="tel">手机号</label>
                        </td>
                        <td class="td_right">
                            <input type="text" name="tel" placeholder="请输入手机号" id="tel">
                        </td>
                    </tr>
        
                    <!-- 第六行 -->
                     <tr >
                        <td class="td_left">
                            <label for="gender">性别</label>
                        </td>
                        <td class="td_right">
                            <input type="radio" name="gender" id="gender" checked>男
                            <input type="radio" name="gender" id="gender">女
                        </td>
                    </tr>
        
                    <!-- 第七行 -->
                    <tr >
                        <td class="td_left"> 
                            <label for="birthday">出生日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" name="birthday" id="birthday" >
                        </td>
                    </tr>
        
                    <!-- 第八行 -->
                    <tr >
                        <td class="td_left">
                            <label for="code">验证码</label>
                        </td>
                        <td class="td_right">
                            <input type="text" name="code" id="code" >
                            <input type="image" src="img/verify_code.jpg" id="img_code">
                        </td>
                    </tr>
        
                    <!-- 第九行 -->
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" value="注册" id="button_regisit">
                        </td>
                    </tr>
        
                </table>
            </form>
        </div>

        <!-- right -->
        <div class="rg_right">
            <div>
                已有帐号？
                <a href="https://www.csdn.net/">立即登录</a>
            </div>
        </div>
    </div>

    <script>
        /*
            分析：
                1.给表单绑定onsubmit事件。监听器中，判断每一个方法的校验结果
                    如果都为true，则监听器方法返回true
                    如果有一个为false，则返回false

                2.定义一些方法，分别校验各个表单项
                3.给各个表单项绑定onblur事件
        */

        window.onload = function(){
            //1.给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function(){
                //调用用户校验方法      checkUsername();

                //调用密码校验方法      checkPassword();
                //return checkUsername() && checkPassword();
                return checkUsername() && checkPassword();
            }

            //给用户名和密码输入框绑定离焦事件
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
        }

        //校验用户名
        function checkUsername(){
            //1.获取用户名的值
            var username = document.getElementById("username").value;
            //2.定义正则表达式
            var reg_username = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_username.test(username);
            //4.提示信息
            var s_username = document.getElementById("s_username");
            if(flag){
                //提示绿色的对勾
                s_username.innerHTML = "<img src='img/gou.png' width='35' height='25px'/>"
            }else{
                //提示红色的用户名有误
                s_username.innerHTML = "用户名格式有误";
            }
            return flag;

        }

        //校验密码
        function checkPassword(){
            //1.获取用户名的值
            var password = document.getElementById("password").value;
            //2.定义正则表达式
            var reg_password = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_password.test(password);
            //4.提示信息
            var s_password = document.getElementById("s_password");
            if(flag){
                //提示绿色的对勾
                s_password.innerHTML = "<img src='img/gou.png' width='35' height='25px'/>"
            }else{
                //提示红色的用户名有误
                s_password.innerHTML = "密码格式有误";
            }
            return flag;

        }
    </script>
</body>
</html>