weixin_43415461
CherryOto
采纳率33.3%
2020-05-30 15:33 阅读 226

关于onblur事件的小问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="js.css">
    <style>
        body{
            background: url("../image/wallhaven-1.png") no-repeat center;
            padding-top: 25px;
        }
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .rg_layout{
            border: #EEEEEE 8px solid;
            width: 900px;
            height: 500px;
            background-color:white;
            /* 水平居中 */
            margin: auto;
            margin-top: 100px;
        }
        .rg_left{
            float: left;
            margin: 15px;
        }
        .rg_left > p:first-child{
            font-size: 20px;
            color: rgb(247, 194, 2);
            padding-left: 3px;

        }
        .rg_left > p:last-child{
            font-size:20PX;
            color: #A6A6A6;
            padding-left: 3px;
        }

        .rg_center{
            float: left;
            margin-left: 35px;
            margin-top: 15px;

        }
        .rg_right{
            float: right;
            margin: 15px;
        }
        .rg_right > p{
            font-size: 15px;
        }
        .rg_right  p a{
            color: pink;
        }
        .td_left{
            text-align: right;
            width: 100px;
            height: 45px;
        }
        .td_right{
            padding-left:50px; 
        }
        #userName,#password,#email,#name,#telphone,#birthday,#checkcode{
            height: 30px;
            width: 250px;
            padding-left: 15px;
            /* 设置边框圆角 */
            border-radius: 5px;
            border: 1px #A6A6A6 solid;
        }
        #checkcode{
            width: 120px;
        }
        #image{
            /* 垂直居中 */
            vertical-align:middle;
            height: 32px;
            margin-left: 10px;
        }
        #button{
            background-color: rgb(247, 194, 2);
            width: 120px;
            height: 33px;
            border: 1px solid rgb(247, 194, 2);
        }
        .button{
            padding-left: 20px;
            padding-top: 10px;
        }
        .check{
            height: 30px;
            width: 250px;
            padding-left: 5px;
            font-size: 13px;
        }
        #td_sub{
            padding-left: 150px;
        }
    </style>
    <script>
        /*
            分析:
                1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
                     如果都为true,,则监听器方法返回true。
                     如果有一个为false,则监听器方法返回false。
                2.定义一些方法分别各个校验各个表单项。
                3.给各个表单项绑定onblur事件。
        */


        window.onload = function(){
            //1.给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function () {
                return checkUserName() && checkpassWord();
                }
                //绑定离焦事件
                document.getElementById("userName").onblur = checkUserName;
                document.getElementById("password").onblur = checkpassWord;
            }


            //2.校验用户名 
            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 = " &radic;";
                }else{
                    //提示红色用户名有错
                    s_userName.innerHTML = "用户名格式有误";
                }
                return flag;
            }

            //2.校验密码
            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 = " &radic;";
                }else{
                    //提示红色用户名有错
                    s_passWord.innerHTML = "密码格式有误";
                }
                return flag;
            }


    </script>
</head>

<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISITER</p>
        </div>
        <div class="rg_center">
            <div class="rg">
                <form action ="#" method="get" id="form">
                    <table>
                        <tr>
                            <td class="td_left"><label for="userName">用户名</label></td>
                            <td class="td_right"><input type="text" name="userName" id="userName" placeholder="请输入用户名" >
                            <span id="s_userName" class="check"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="passWord">密码</label></td>
                            <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_passWord" class="check"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right"><input type="Email" name="email" id="email" placeholder="请输入邮箱"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="Name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="telphone">手机号</label></td>
                            <td class="td_right"><input type="text" name="tel" id="telphone" placeholder="请输入手机号"></td>
                        </tr>
                        <tr>
                            <td class="td_left">性别</td>
                            <td class="td_right">
                                <input type="radio" name="sex" value="male">   男
                                <input type="radio" name="sex" value="female">   女
                            </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="checkcode">验证码</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode">
                            <image id="image" src="../image/yzm.png" height="30px"  >
                            </td>
                        </tr>
                        <tr>
                            <td class="button" colspan="2" id="td_sub">
                                <input type="submit" value="注册" id="button">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="rg_right">
            <P>已有账号<a href="#">立即登录</a></P>
        </div>
    </div>
</body>
</html>

这里的return checkUserName() && checkpassWord(); 为什么是 && ,而且并没有加if语句,如果改成 == 我还能理解。

window.onload = function(){
            //1.给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function () {
                return checkUserName() && checkpassWord();
                }
                //绑定离焦事件
                document.getElementById("userName").onblur = checkUserName;
                document.getElementById("password").onblur = checkpassWord;
            }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    qq_28199467 夜空中最亮的那颗星 2020-05-30 15:56

    JavaScript的短路运算

    return checkUserName() && checkpassWord()
    方法一 如果如果返回true 则返回 方法二的值
    方法一 如果如果返回false 则返回 方法一的值

    参照 https://www.cnblogs.com/thinkingthigh/p/9748744.html

    点赞 评论 复制链接分享
  • zSY_snake 衣乌安、 2020-05-30 15:57

    与运算逻辑,首先checkUserName检验userName,结果为true然后checkpassWord检验password,都为true,返回true验证通过,有一个是false返回false验证不通过

    点赞 评论 复制链接分享

相关推荐