一个可以直接用的前端密码强度校验

最新推荐文章于 2024-08-02 22:37:16 发布

Skylar_z

最新推荐文章于 2024-08-02 22:37:16 发布

阅读量879

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/sirlll/article/details/123323092

版权

密码强度前端开发 JavaScript HTML CSS

关键词由CSDN通过智能技术生成

<html>

<head>
    <title> 密码强度检测 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        input {
            float: left;
            font-size: 14px;
            width: 250px;
            height: 25px;
            border: 1px solid #ccc;
            padding-left: 10px;
        }
        
        #tips {
            float: left;
            font-size: 12px;
            width: 400px;
            height: 25px;
            margin: 4px 0 0 20px;
        }
        
        #tips span {
            float: left;
            width: 40px;
            height: 20px;
            color: #fff;
            overflow: hidden;
            margin-right: 10px;
            background: #D7D9DD;
            line-height: 20px;
            text-align: center;
        }
        
        #tips .s1 {
            background: #F45A68;
        }
        /*红色*/
        
        #tips .s2 {
            background: #fc0;
        }
        /*橙色*/
        
        #tips .s3 {
            background: #cc0;
        }
        /*黄色*/
        
        #tips .s4 {
            background: #14B12F;
        }
        /*绿色*/
    </style>
</head>

<body>
    <input type="text" id="password" value="" maxlength="16" />
    <div id="tips">
        <span>弱</span>
        <span>中</span>
        <span>强</span>
        <span>很强</span>
    </div>
</body>
<script type="text/javascript">
    var password = document.getElementById("password"); //获取文本框的对象
    //var value = password.value; //获取用户在文本框里面填写的值
    //获取所有的span标签 返回值是一个数组
    var spanDoms = document.getElementsByTagName("span");
    password.onkeyup = function() {
            //获取用户输入的密码,然后判断其强度 返回0 或者 1 2 3 4
            var index = checkPassWord(this.value);
            for (var i = 0; i < spanDoms.length; i++) {
                spanDoms[i].className = ""; //清空span标签所有的class样式
                if (index) { //0 代表false 其余代表true
                    spanDoms[index - 1].className = "s" + index;
                }
            }
        }
        //校验密码强度
    function checkPassWord(value) {
        // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
        // 3： 表示第四个级别 4：表示第五个级别
        var modes = 0;
        if (value.length < 6) { //最初级别
            return modes;
        }
        if (/\d/.test(value)) { //如果用户输入的密码 包含了数字
            modes++;
        }
        if (/[a-z]/.test(value)) { //如果用户输入的密码 包含了小写的a到z
            modes++;
        }
        if (/[A-Z]/.test(value)) { //如果用户输入的密码 包含了大写的A到Z
            modes++;
        }
        if (/\W/.test(value)) { //如果是非数字 字母 下划线
            modes++;
        }
        switch (modes) {
            case 1:
                return 1;
                break;
            case 2:
                return 2;
                break;
            case 3:
                return 3;
                break;
            case 4:
                return 4;
                break;
        }
    }
</script>

</html>