实现时的一些小疑惑

来源：2-25 项目作业

weixin_慕丝0226078

2021-03-04 16:01:07

相关代码：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .center-wrap {
            width: 700px;
            height: 300px;
            border: 2px orange solid;
            border-radius: 5px;
            margin: 0 auto;
            padding: 60px 0 0 0;
        }
        .center-wrap .area {
            padding-left: 65px;
            line-height: 50px;
            position: relative;
        }
        .center-wrap span.point {
            color: orange;
            margin-right: 3px;
        }
        .center-wrap .name-area>label {
            letter-spacing: 3px;
        }
        .center-wrap .name-area>span {
            color: orange;
        }
        .center-wrap .input-style {
            border: 1px solid rgba(0,0,0,.5);
            width: 200px;
            border-radius: 5px;
            line-height: 30px;
            padding-left: 10px;
            margin-right: 10px;
        }

        .center-wrap .pwd-area ul {
            list-style: none;
            position: absolute;
            top: 23px;
            right: 146px;
        }
        .center-wrap .pwd-area ul>li {
            float: left;
            margin-right: 5px;
            width: 50px;
            height: 6px;
            background-color: rgba(0,0,0,.3);
        }
        .center-wrap .register {
            text-align: center;
            padding-top: 50px;
        }
        .center-wrap .register>input{
            background-color: rgb(255, 123, 0);
            color: white;
            border: none;
        }
        .wrong::placeholder {
            color: red;
        }



    </style>
    <script>
        function isNameLegal(name) {
            var regex = /^[a-zA-Z]\w{5,29}$/;
            var warning = document.getElementById("warning");
            if(regex.test(name)){
                warning.innerText = "用户名输入正确";
                warning.style.color = "green";
                return true;
            }else {
                warning.innerText = '6-30位字母，数字或"_"，字母开头';
                warning.style.color = "red";
                return false;
            }
        }
        function isPwdLegal(pwd, pd) {
            var regex = /^[a-zA-Z0-9]{6,20}$/;
            if(!regex.test(pd)){
                pwd.classList.add("wrong");
                return false;
            }else {
                pwd.classList.remove("wrong");
                return true;
            }
        }
        function pwdLevel(pd) {
            var rgx1 = /\d/, rgx2=/[a-z]/, rgx3=/[A-Z]/;
            var f1 = rgx1.test(pd);
            var f2 = rgx2.test(pd);
            var f3 = rgx3.test(pd);
            console.log(f1,f2,f3);
            if(f1 || f2 ||f3){
                var l1 = document.querySelector(".pwd-area ul>li:nth-child(1)");
                l1.style.backgroundColor = "red";
            }
            if (f1&&f2 ||f2&&f3 ||f1&&f3){
                var l2 = document.querySelector(".pwd-area ul>li:nth-child(2)");
                l2.style.backgroundColor = "orange";
            }
            if (f1&&f2&&f3){
                var l3 = document.querySelector(".pwd-area ul>li:nth-child(3)");
                l3.style.backgroundColor = "green";
            }
        }
        window.onload = function() {
            var rf = document.getElementById("reg-form");
            var name = rf.name;
            var flag1=false, flag2=false, flag3=false;
            name.onblur = function () {
                var nm = name.value;
                flag1 = isNameLegal(nm);
            }
            var pwd = rf.pwd;
            var pd=null;
            pwd.onblur = function() {
                pd = pwd.value;
                flag2 = isPwdLegal(pwd, pd);
                if(flag2){
                    pwdLevel(pd);
                }else {
                    pwd.value = "";
                    var ls = document.querySelectorAll(".pwd-area ul>li");
                    for(var i =0;i<ls.length;i++){
                        ls[i].style.backgroundColor = "rgba(0,0,0,.3)";
                    }
                }
            }
            var cpwd = rf.cpwd;
            console.log(cpwd);
            cpwd.onblur = function() {
                var warning = document.querySelector(".cpwd-area #warning");
                if(cpwd.value==""){
                    warning.innerText = "输入框不能为空";
                    warning.style.color = "red";
                }else if (cpwd.value != pd){
                    cpwd.value = "";
                    warning.innerText = "两次密码输入不一致，请重新输入";
                    warning.style.color = "red";
                }else {
                    warning.innerText = "两次输入一致";
                    warning.style.color = "green";
                    flag3 = true;
                }

            }
            var rb = rf.rb;
            rb.onclick = function() {
                if(flag1 && flag2 &&flag3){
                    alert("信息填写正确");
                }else {
                    alert("请填写正确信息");
                }
            }


        }
    </script>
</head>
<body>
    <div class="center-wrap">
        <form action="javascript:location.reload();" id="reg-form">
            <div class="name-area area">
                <label for="name"><span class="point">*</span>用户名：</label>
                <input type="text" name="name"  placeholder="用户名设置成功后不可修改" class="input-style">
                <span id="warning">6-30位字母，数字或"_"，字母开头</span>
            </div>
            <div class="pwd-area area">
                <label for="pwd"><span class="point">*</span>登录密码：</label>
                <input type="password" name="pwd"  placeholder="6-20位字母与数字" class="input-style">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

            </div>
            <div class="cpwd-area area">
                <label for="cpwd"><span class="point">*</span>确认密码：</label>
                <input type="password" name="cpwd" class="input-style" placeholder="再次输入您的登录密码">
                <span id="warning"></span>
            </div>
            <div class="register">
                <input type="submit" name="rb" value="注册"  class="input-style">
            </div>
        </form>
    </div>
</body>
</html>