JavaScript 事件练习（表单校验） December 25，2019

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            box-sizing: border-box;
        }
        /*定义背景*/
        body{
            background: url("../img/register_bg.png") no-repeat center;
        }
        .rg_layout{
            height: 500px;
            width: 900px;
            border: 8px solid #eeeeee;
            background-color: white;
            margin: auto;
            margin-top: 50px;
        }

        .rg_left{
            /*border: red 1px solid;*/
            float: left;
            margin: 15px;
        }
        #p_new{
            font-size: 20px;
            color:#ffd026 ;
        }
        #p_user{
            font-size: 20px;
            color:#a6a6a6 ;
        }

        .rg_center{
            width: 500px;
            float: left;/*左漂浮*/
            padding-top: 10px;
        }
        .form_left{
            width: 100px;
            height: 45px;
            text-align: right;/*右对齐*/
        }
        .form_right{
            width: 400px;
            height: 45px;
            padding-left: 20px;
        }
        #user,#email,#password,#name,#birth,#iphone,#code{
            width: 251px;
            height: 32px;
            padding-left: 12px;
            border-radius: 5px;/*圆角*/
        }
        #code{
            width: 110px;
        }
        #img_check{
            height: 32px;
            padding-left: 10px;
            vertical-align: middle;/*垂直居中*/
        }
        #btn_sub{
            width: 150px;
            height: 40px;

            background-color: #ffd026;
            border: #ffd026;
        }

        .rg_right{
            /*border: red 1px solid;*/
            float: right;
        }
        #p_1{
            margin: 15px;
            font-size: 15px;
        }
        #p_2{
            color:pink ;
        }

        .error{
            color:silver;
            font-size: 12px;
        }
        #_sub{
            padding-left: 100px;
        }
    </style>

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

                2.定义一些方法分别校验各个表单项。
                3.给各个表单项绑定onblur事件。
         */
        window.onload = function () {
            //1.给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function () {
                //调用用户校验方法   chekUsername();
                //调用密码校验方法   chekPassword();
                return chekUsername() && chekPassword();
            }
            document.getElementById("user").onblur = chekUsername;
            document.getElementById("password").onblur = chekPassword;
        }

        function chekUsername(){
            //1.获取用户名的值
            var user = document.getElementById("user").value;
            //2.定义正则表达式
            var reg_user = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_user.test(user);
            //4.提示信息
            var s_username = document.getElementById("s_username");
            if(flag){
                s_username.innerHTML = "<img width='35' height='25' src='../img/gou.png'>"
            }else{
                s_username.innerHTML ="用户名格式错误"
            }
            return flag;
        }
        function chekPassword(){
            //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 width='35' height='25' src='../img/gou.png'>"
            }else{
                s_password.innerHTML ="密码格式错误"
            }
            return flag;
        }
    </script>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p id="p_new">新用户注册</p>
        <p id="p_user">USER REGISTER</p>
    </div>

    <div class="rg_center">
        <div class="rg_form">
            <form action="#" method="post" id ="form">
                <table  cellpadding="0">
                    <tr>
                        <td class="form_left" width="30%"><label for="user">用户名</label> </td>
                        <td class="form_right">
                            <input type="text" id="user" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span> <!--用来表单检验-->
                        </td>
                    </tr>
                    <tr>
                        <td class="form_left" width="30%"><label for="password">密码</label></td>
                        <td class="form_right">
                            <input type="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span> <!--用来表单检验-->
                        </td>
                    </tr>

                    <tr>
                        <td class="form_left" width="30%"><label for="email">Email</label></td>
                        <td class="form_right"><input type="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>
                    <tr>
                        <td class="form_left" width="30%"><label for="name">姓名</label></td>
                        <td class="form_right"><input type="text" id="name" placeholder="请输入真实姓名"></td>
                    </tr>
                    <tr>
                        <td class="form_left" width="30%"><label for="iphone">手机号</label></td>
                        <td class="form_right"><input type="text" id="iphone" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="form_left" width="30%">性别</td>
                        <td class="form_right"><input type="radio" name="gender" value="man">男
                            <input type="radio" name="gender" value="woman">女
                        </td>
                    </tr>
                    <tr>
                        <td class="form_left" width="30%"><label for="birth">出生日期</label></td>
                        <td class="form_right"><input type="date" id="birth"></td>
                    </tr>
                    <tr>
                        <td class="form_left" width="30%"><label for="code">验证码</label></td>
                        <td class="form_right"><input type="text" id="code"><img id="img_check" src="../img/verify_code.jpg"></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center" id="_sub"><input id="btn_sub" type="submit" value="注册"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <div class="rg_right">
        <p id="p_1">已有账号？<a href="http://baidu.com" target="_blank" id="p_2">立即登录</a></p>
    </div>
</div>
</body>
</html>
JavaScript 事件练习（表单校验） December 25，2019

猜你喜欢
