正则密码强度验证JS + HTML

最新推荐文章于 2021-06-19 02:38:14 发布

出发的星辰

最新推荐文章于 2021-06-19 02:38:14 发布

阅读量147

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/qq_41679133/article/details/107562872

版权

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #dv{
            width: 300px;
            height:200px;
            position: absolute;
            left:300px;
            top:100px;
        }
        .strengthLv0 {
            height: 10px;
            width: 120px;
            border: 1px solid #ccc;
            padding: 2px;
        }

        .strengthLv1 {
            background: red;
            height: 10px;
            width: 40px;
            border: 1px solid #ccc;
            padding: 2px;
        }

        .strengthLv2 {
            background: orange;
            height: 10px;
            width: 80px;
            border: 1px solid #ccc;
            padding: 2px;
        }

        .strengthLv3 {
            background: green;
            height: 10px;
            width: 120px;
            border: 1px solid #ccc;
            padding: 2px;
        }
        </style>
        <body>
        <div id="dv">
        <label for="pwd">密码</label>
        <input type="text" id="pwd" maxlength="16">
        <div>
            <em>密码强度：</em>
            <div id="strengthLevel" class="strengthLv0"></div>
        </div>
        </div>
        <script>
        var pwd = document.getElementById("pwd");
        var ss = document.getElementById("strengthLevel");
        // 注册键盘抬起事件
        pwd.onkeyup = function(){
            if(this.value.length > 0){
              var lvl = getpassword(this.value);
              ss.className = "strengthLv"+lvl;
            }else{
              ss.className = "strengthLv0";
            }     

        //     ss.className = "strengthLv"+(this.value.length >= 6?getpassword(this.value):0)
        };
        //判断获取密码级别
        function getpassword(pwd){
            var lvl = 0;//默认等级是0

            // 判断数字
            if(/[0-9]/.test(pwd)){
                lvl++;
            }
            // 判断有没有字母
            if(/[a-zA-Z]/.test(pwd)){
                lvl++;
            }
            // 判断有没有特殊符号
            if(/[^0-9a-zA-Z]/.test(pwd)){
                lvl++;
            }
            return lvl; //默认传出是0
        }
        </script>
        </body>
        </html>

演示

在这里插入图片描述

出发的星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则密码强度验证JS + HTML

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>
复制链接

扫一扫