密码验证(正则)

用正则验证登录密码

思路:1.先验证内容是否合法
2.在合法前提下,处理长度问题
3.在满足合法;长度满足前提下,在处理强度问题
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 = "请输入6-12密码";
        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";
    }

你可能感兴趣的:(前端笔记)