密码验证(正则)

用正则验证登录密码

思路:1.先验证内容是否合法
2.在合法前提下,处理长度问题
3.在满足合法;长度满足前提下,在处理强度问题
div 部分:

<div class="box">
        <input type="password"><span></span>
        <div>
            <button id="vbBtn">显示密码</button>
            <button id="hBtn">隐藏密码</button>
        </div>
    </div>

js部分:

var ipt = document.getElementsByTagName("input")[0];
    var p = document.getElementsByTagName("p")[0];
    var span = document.getElementsByTagName("span")[0];
    var vbBtn = document.getElementById("vbBtn");
    var hBtn = document.getElementById("hBtn");

    ipt.onfocus = function () {
        span.innerHTML = "<span>请输入6-12密码</span>";
        ipt.oninput = function () {
            var value = ipt.value;
            if (value.length == 0) {
                span.innerHTML = "密码不能为空";
                span.style.color = "red";
            } else if (value.length < 6) {
                span.innerHTML = "密码不能小于6";
                span.style.color = "red";
            } else if (value.length > 12) {
                span.innerHTML = "密码不能大于12";
                span.style.color = "red";
            } else {
                var patt1 = /[^\w]/;
                var res = patt1.test(value);
                if (!res) {
                    var reg1 = /^\d*$/g; //纯数字
                    var reg2 = /^[a-zA-Z]*$/g; //纯字母
                    var reg3 = /^\_*$/g;  //纯下划线
                    var reg4 = /^[a-zA-Z0-9]*$/g;
                    var reg5 = /^[a-zA-Z\_]*$/g;
                    var reg6 = /^[0-9\_]*$/g;
                    var reg7 = /^\w*$/g;
                    if (value.match(reg1) || value.match(reg2) || value.match(reg3)) {
                        span.innerHTML = "密码强度弱";
                        span.style.color = "red";
                    } else if (value.match(reg4) || value.match(reg5) || value.match(reg6)) {
                        span.innerHTML = "密码强度中";
                        span.style.color = "orange";
                    } else if (value.match(reg7)) {
                        span.innerHTML = "密码强度高";
                        span.style.color = "green";
                    }
                } else {
                    span.innerHTML = "输入不合法";
                    span.style.color = "red";
                }

            }
        }
    }

    // 点击显示密码
    vbBtn.onclick = function () {
        ipt.type = "text";
    }
    // 点击隐藏密码
    hBtn.onclick = function () {
        ipt.type = "password";
    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值