您的位置：首页 > Web前端 > JavaScript

JavaScript-密码强度

2018-02-24 15:26 344 查看
今天小小咸儿发现了一件好玩的事情，就是在注册的时，通常需要设置密码（这是当然的咯！！！），然后发现根据数字、字母、特殊符号的加入，它显示的密码强度也会不同，例如：

如果为任意一种的话：



如果任意两者结合的话：



如果三者结合的话：



今天小咸儿就来给大家分享一下如何实现这种密码强度的设置：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
onload = function () {
var pwd = document.getElementById("pwd");
pwd.onkeyup = function () {
var level = 0;
var input = this.value;
//if (input.length < 6) return;
//验证
//数字 字母 特殊字符     密码的构成
// 111   三个都包含
// 011 101 110    只包含其中两个
// 100 010 001    只包含一个
//看你满足数字吗？ +1
//看你满足字母吗？ +1
//看你满足特殊字符吗？ +1
//权值

if (/[a-zA-Z]+/.test(input)) {
level++;
}
if (/\d+/.test(input)) {
level++;
}
if (/[~!#@$%^&*\(\)\-\_\+\=\{\}\[\]\).]+/.test(input)) {
level++;
}
var msg = document.getElementById("msg");
msg.innerHTML = ",<span style=\"background-color:red;\">弱</span>,<span style=\"background-color:yellow;\">中等</span>,<span style=\"background-color:green;\">强</span>".split(',')[level];
};
};
</script>
</head>
<body>
<input type="text" name="name" value="" id="pwd"/>
<p id="msg"></p>
</body>
</html>


页面显示效果：



首先小咸儿先说明制作的很粗糙，如果有朋友能够制作的漂亮并且简单的话，欢迎来分享！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  密码强度 JavaScrip
相关文章推荐
新的分享
章节导航