最简单的js 判断密码强度

最新推荐文章于 2024-04-24 09:22:16 发布

最骚的就是你

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1.5w

点赞数 9

分类专栏： web前端学习文章标签：密码 javascript 密码强度

本文链接：https://blog.csdn.net/libin_1/article/details/51577472

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>密码强度检测</title>
        <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
        <style type="text/css">
            body {
                font: 12px/1.5 Arial;
            }

            input {
                float: left;
                font-size: 12px;
                width: 150px;
                font-family: arial;
                padding: 3px;
                border: 1px solid black;
            }

            input.error {
                border: 1px solid red;
            }

            #tips {
                float: left;
                margin: 2px 0 0 20px;
            }

            #tips span {
                float: left;
                width: 50px;
                height: 20px;
                color: white;
                background: green;
                margin-right: 2px;
                line-height: 20px;
                text-align: center;
            }
        </style>

        <script type="text/javascript">
            $(function() {
                var aStr = ["弱", "中", "强", "牛逼"];

                function checkStrong(val) {
                    var modes = 0;
                    if (val.length < 6) return 0;
                    if (/\d/.test(val)) modes++; //数字
                    if (/[a-z]/.test(val)) modes++; //小写
                    if (/[A-Z]/.test(val)) modes++; //大写  
                    if (/\W/.test(val)) modes++; //特殊字符
                    if (val.length > 12) return 4;
                    return modes;
                };
                $(":text").keyup(function() {
                    var val = $(this).val();
                    $("p").text(val.length);
                    var num = checkStrong(val);
                    switch (num) {
                        case 0:
                            break;
                        case 1:
                            $("#tips span").css('background', 'yellow').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
                            break;
                        case 2:
                            $("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
                            break;
                        case 3:
                            $("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
                            break;
                        case 4:
                            $("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
                            break;
                        default:
                            break;
                    }
                })
            })
        </script>
    </head>

    <body>
        <input type="text" value="" maxlength="16" />
        <div id="tips"><span></span><span></span><span></span><span></span></div>
        <p></p>
    </body>

</html>

最骚的就是你

关注

9
点赞
踩
31

收藏

觉得还不错? 一键收藏
9
评论
最简单的js 判断密码强度

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>密码强度检测</title> <script type="text/javascript" src="js/jquery-2.2.4.
复制链接

扫一扫