关于密码强度实现

首页课程实战体系课手记专栏慕课教程

关于密码强度实现

来源：2-25 项目作业

江舟

2021-05-22 23:15:22

老师，注册的密码强度js实现是否有最佳实践，能否对其进行下讲解？

我的实现方式是通过数组存储三个正则表达式，分别去匹配数字、小写字母、大写字母，如果其中匹配结果为true的个数即密码强度的级数。但是这种实现方式需要依赖另一个存储颜色的数组，这两个数组关联性太高，可修改性低。

完整代码如下：

<!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>register</title>
    <style>
        html{
            height: 100%;
        }
        body{
            margin: 0;
            padding: 0;
            height: 100%;
            background: linear-gradient(#141e30, #243b55);
        }
        .register-outside{
            width: 800px;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
        .register{
            width: 400px;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 0 20px;
            background-color: rgba(0, 0, 0, .5);
            box-shadow: 0 15px 20px rgba(0, 0, 0, .6);
            color: white;
        }
        .register h2{
            text-align: center;
            padding: 20px 0;
            margin: 0;
        }
        .register .user-box{
            padding-left: 20px;
            margin-bottom: 20px;
        }
        .register .user-box .register-label{
            float: left;
            padding-top: 5px;
            width: 80px;
            font-size: 14px;
        }
        .register .user-box .require::before{
            content: "*";
            position: absolute;
            margin-left: -1em;
            margin-top: 0.5em;
            color: red;
            font-size: 14px;
        }
        .register .user-box .register-cell{
            display: table-cell;
        }
        .register .user-box input{
            background-color: transparent;
            font-size: 18px;
            outline: none;
            box-sizing: border-box;
            padding: 5px 20px 5px 0px;
            color: white;
            border: none;
            border-bottom: 1px solid white;
        }
        .register #submit{
            display: block;
            box-sizing: border-box;
            padding: 10px 20px;
            width: 50%;
            margin: 20px auto;
            font-size: 16px;
            color: #03e9f4;
            background-color: transparent;
            border: none;
            letter-spacing: 1em;
            cursor: pointer;
            border-radius: 5px;
            transition: all .5s 0s ease;
        }
        .register #submit:hover{
            color: white;
            background-color: #03e9f4;
            box-shadow: 0 0px 5px #03e9f4,
                        0 0px 25px #03e9f4,
                        0 0px 50px #03e9f4,
                        0 0px 100px #03e9f4;
        }
        .register .register-remark{
            position: absolute;
            margin-left: 1em;
            margin-top: 1em;
            height: 1em;
        }
        .register .register-remark i{
            display: inline-block;
            width: 3px;
            height: 1em;
            background-color: #fff;
            margin-right: 0.5em;
        }

        .red{
            color: red;
        }
    </style>
</head>
<body>
    <section class="register-outside">
        <div class="register">
            <h2>注册</h2>
            <form action="">
                <div class="user-box">
                    <label for="u_name" class="register-label require">用户名</label>
                    <div class="register-cell">
                        <input type="text" name="u_name" id="u_name">
                        <span class="register-remark">
                        </span>
                    </div>
                </div>
                <div class="user-box">
                    <label for="pwd_f" class="register-label require">登录密码</label>
                    <div class="register-cell">
                        <input type="password" name="pwd_f" id="pwd_f" placeholder="6-20位字母或数字">
                        <span class="register-remark">
                            <i></i>
                            <i></i>
                            <i></i>
                            <span class="red"></span>
                        </span>
                    </div>
                </div>
                <div class="user-box">
                    <label for="pwd_s" class="register-label require">确认密码</label>
                    <div class="register-cell">
                        <input type="password" name="pwd_s" id="pwd_s">
                        <span class="register-remark">
                        </span>
                    </div>
                </div>
                <div class="user-box">
                    <label for="email" class="register-label">邮箱</label>
                    <div class="register-cell">
                        <input type="text" name="email" id="email">
                    </div>
                </div>
                <input type="submit" value="SUBMIT" id="submit">
            </form>
        </div>
    </section>

    <script>
        let u_name = document.getElementById("u_name");
        let pwd_f = document.getElementById("pwd_f");
        let pwd_s = document.getElementById("pwd_s");
        let canSubmit = {userName:false,firstPwd:false,secondPwd:false};
        u_name.onblur=function(e){
            if(/^[a-zA-Z]\w{5,29}$/.test(this.value)){
                this.nextElementSibling.innerHTML = "用户名输入正确";
                this.nextElementSibling.style.color = "green";
                canSubmit.userName = true;
            }else{
                this.nextElementSibling.innerHTML = "6-30位字母、数字或’_’，字母开头";
                this.nextElementSibling.style.color = "red";
                canSubmit.userName = false;
            }
        }
        let pwdStrength = [/\d/,/[a-z]/,/[A-Z]/];
        let bgc = ["red","yellow","green"];
        pwd_f.onblur = function (e) {
            this.nextElementSibling.lastElementChild.innerHTML = "";
            bgc.map((n,pos)=>pos).forEach(pos=>this.nextElementSibling.children[pos].style.backgroundColor="");
            if(/[a-zA-Z0-9]{6,20}/.test(this.value)){
                let index = pwdStrength.map(pattern=>pattern.test(this.value))
                                        .reduce((arr,cur)=>cur?arr+1:arr,0)-1;
                bgc.forEach((color,pos)=>{
                    if(pos<=index){
                        this.nextElementSibling.children[pos].style.backgroundColor = color;
                    }else{
                        this.nextElementSibling.children[pos].style.backgroundColor = "";
                    }
                })

            canSubmit.firstPwd = true;
            }else{
                this.nextElementSibling.lastElementChild.innerHTML = "6-20位字母或数字";
                canSubmit.firstPwd = false;
            }
        }
        pwd_s.onblur = function(e){
            this.nextElementSibling.style.color="red";
            canSubmit.secondPwd = false;
            if(this.value.length===0){
                this.nextElementSibling.innerHTML = "输入框不能为空";
            }else if(this.value === pwd_f.value){
                this.nextElementSibling.innerHTML = "两次输入一致";
                this.nextElementSibling.style.color = "green";
                canSubmit.secondPwd = true;
            }else{
                this.nextElementSibling.innerHTML = "两次密码输入不一致，请重新输入";
            }
        }
        document.getElementById("submit").onclick = function(e){
            if(Object.keys(canSubmit).every(key => canSubmit[key]))alert("信息填写正确");
            else alert("请填写正确信息");
            e.preventDefault();
        }
    </script>
</body>
</html>