搜索
  • jQuery实现密码强弱判断的功能代码
  • 发布于 2个月前
  • 1129 热度
    0 评论
  • 张蜚
  • 23 粉丝 38 篇博客
  •   

我们在进行系统开发时，特别是在做用户账户注册功能开发时，经常会有提示用户输入的注册账户密码强弱的提示功能需求，以方便指导用户设置一个密码强度合适的密码。这个功能一般都是用js在前端实现的，今天我们就用jQuery实现一个判断用户密码强弱的功能代码示例。

第一步：引入jQuery,我这边用的是baidu的1.11.3版本，你们可以直接如下面这样引用，也可以自己下载到本地后，从本地项目添加引用 

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

第二步：设置简单的CSS效果 

<style type="text/css">
    body {
	margin:0;
	padding:0;
	font-size:16px;
}
form {
	margin:0 auto;
	width:305px;
	transition:all 1s ease-out 0s;
}
input {
	font-size:16px;
	height:25px;
	width:280px;
	margin-top:20px;
	color:#333;
	outline:none;
	border-radius:5px;
	border:1px solid #ccc;
}
input:focus {
	border:1px solid #09f;
}
p {
	display:inline-block;
	font-size:12px;
	color:#ccc;
	margin:0;
	margin-right:6px;
}
span {
	display:none;
	width:42px;
	font-size:12px;
	margin-left:2px;
	color:#ccc;
	background:#ccc;
	text-align:center;
}
span.ruo {
	background:#f00;
	color:#fff;
	opacity:0.5;
}
span.zo {
	background:rgb(255,224,0);
	opacity:1;
	color:#fff;
}
span.qiang {
	background:rgb(3,146,3);
	color:#fff;
}
</style>

第三步：核心的js算法 

<script type="text/javascript">
        var pawd = document.querySelector('#pawd');
        var state = '弱'; //模拟密码强度判断
        pawd.onkeyup = function () {
            var regStr = /[a-zA-Z]/; //所有字母
            var regNum = /[0-9]/; //所有数字
            var sup = /\W/; //所有非字母数字
            if (this.value.length >= 1) {
                ruo.style.display = "inline-block";
                ruo.className = "ruo";
                ruo.innerHTML = "弱";
                zo.style.display = "inline-block";
                zo.className = "";
                qiang.style.display = "inline-block";
                qiang.className = "";
                state = "弱";
            }
            var sn = this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value);
            var sp = this.value.length >= 1 && regStr.test(this.value) && sup.test(this.value);
            var np = this.value.length >= 1 && regNum.test(this.value) && sup.test(this.value);
            if (sn || sp || np) {
                ruo.className = "zo";
                ruo.innerHTML = " ";
                zo.className = "zo";
                zo.innerHTML = "中";
                state = "中";
            }
            if (this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value) && sup.test(this.value)) {
                ruo.className = "qiang";
                ruo.innerHTML = " ";
                zo.className = "qiang";
                zo.innerHTML = " ";
                qiang.className = "qiang";
                qiang.innerHTML = "强";
                state = "强";
            }
            if (this.value.length < 1) {
                ruo.style.display = "inline-block";
                ruo.className = "";
                ruo.innerHTML = "弱";
                zo.style.display = "inline-block";
                zo.className = "";
                qiang.style.display = "inline-block";
                qiang.className = "";
            }
        }
    </script>

看一下完整的html代码： 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>检查密码强弱-duidaima.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
body {
	margin:0;
	padding:0;
	font-size:16px;
}
form {
	margin:0 auto;
	width:305px;
	transition:all 1s ease-out 0s;
}
input {
	font-size:16px;
	height:25px;
	width:280px;
	margin-top:20px;
	color:#333;
	outline:none;
	border-radius:5px;
	border:1px solid #ccc;
}
input:focus {
	border:1px solid #09f;
}
p {
	display:inline-block;
	font-size:12px;
	color:#ccc;
	margin:0;
	margin-right:6px;
}
span {
	display:none;
	width:42px;
	font-size:12px;
	margin-left:2px;
	color:#ccc;
	background:#ccc;
	text-align:center;
}
span.ruo {
	background:#f00;
	color:#fff;
	opacity:0.5;
}
span.zo {
	background:rgb(255,224,0);
	opacity:1;
	color:#fff;
}
span.qiang {
	background:rgb(3,146,3);
	color:#fff;
}
</style>
</head>
<body>
<form action="" autocomplete="off">
    <input type="password" name="" id="pawd" placeholder="密码"><img src="" alt=""><br>
    <p>数字字符字母区分密码强弱</p><span id="ruo" style="display:inline-block">弱</span><span id="zo" style="display:inline-block">中</span><span id="qiang" style="display:inline-block">强</span><br>
</form>

<script>
var pawd = document.querySelector('#pawd');

var state = '弱'; //模拟密码强度判断
pawd.onkeyup = function() {

    var regStr = /[a-zA-Z]/; //所有字母
    var regNum = /[0-9]/; //所有数字
    var sup = /\W/; //所有非字母数字
    if (this.value.length >= 1) {

        ruo.style.display = "inline-block";
        ruo.className = "ruo";
        ruo.innerHTML = "弱";
        zo.style.display = "inline-block";
        zo.className = "";
        qiang.style.display = "inline-block";
        qiang.className = "";
        state = "弱";
    }
    var sn = this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value);
    var sp = this.value.length >= 1 && regStr.test(this.value) && sup.test(this.value);
    var np = this.value.length >= 1 && regNum.test(this.value) && sup.test(this.value);
    if (sn || sp || np) {
        ruo.className = "zo";
        ruo.innerHTML = " ";
        zo.className = "zo";
        zo.innerHTML = "中";
        state = "中";
    }
    if (this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value) && sup.test(this.value)) {
        ruo.className = "qiang";
        ruo.innerHTML = " ";
        zo.className = "qiang";
        zo.innerHTML = " ";
        qiang.className = "qiang";
        qiang.innerHTML = "强";
        state = "强";
    }
    if (this.value.length < 1) {
        ruo.style.display = "inline-block";
        ruo.className = "";
        ruo.innerHTML = "弱";
        zo.style.display = "inline-block";
        zo.className = "";
        qiang.style.display = "inline-block";
        qiang.className = "";
    }
}
</script>
</body>
</html>

用户评论
可能感兴趣的话题