密码强度那块怎么做啊？不知道怎么写了
password.onblur = function(){
var pattern = /^\w{6,20}$/;
if(!pattern.exec(password.value)){
spans[1].innerHTML = "6-20位字母、数字或符号"
spans[1].style.color = "red";
spans[1].style.fontSize = '14px';
}else{
test2=true;
if(/^[0-9]{6,20}$/ || /^[a-zA-Z]{6,20}$/ || /^\W{6,20}$/){
}
}
}13
收起
正在回答 回答被采纳积分+1
3回答
好帮手慕码
2019-09-01 10:34:28
同学你好！
可以测试下如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
i {
display: inline-block;
width: 40px;
height: 7px;
background-color: #dddddd;
margin: 5px 10px;
}
</style>
<body>
<p>登录密码：</p>
<input type="text" placeholder="6-20个字母、数字或“_”" id="pass">
<i class="level-1" id="level-1"></i>
<i class="level-2" id="level-2"></i>
<i class="level-3" id="level-3"></i>
<span></span>
<script type="text/javascript">
var pass = document.getElementById('pass');
var span = document.getElementsByTagName('span')
var i = document.getElementsByTagName('i');
pass.onblur = function() {
span[0].innerHTML = '';
var i = document.getElementsByTagName('i');
i[0].style.backgroundColor = "#dddddd";
i[1].style.backgroundColor = "#dddddd";
i[2].style.backgroundColor = "#dddddd";
var reg = /^\S{6,20}$/;
if (!reg.exec(this.value)) {
span[0].innerHTML = '6-20个字母、数字或"_"';
} else {=
if (/^[0-9]{6,20}$/.test(this.value) || /^[a-zA-Z]{6,20}$/.test(this.value) || /^\W{6,20}$/.test(this.value)) {
i[0].style.backgroundColor = "#ff0000";
} else if (/^[0-9|a-z]{6,20}$/.test(this.value) || /^[\W|a-z]{6,20}$/.test(this.value) || /^[\W|0-9]{6,20}$/.test(this.value)) {
i[0].style.backgroundColor = "#ff0000";
i[1].style.backgroundColor = "orange";
} else if (/\W[0-9a-zA-Z]*/.test(this.value)) {
i[0].style.backgroundColor = "#ff0000";
i[1].style.backgroundColor = "orange";
i[2].style.backgroundColor = "green";
}
}
}
</script>
</body>
</html>分别输入数字，字母和标点符号的组合去测试一下。
如果帮助到了你，欢迎采纳，祝学习愉快~
好帮手慕糖
2019-08-25 19:37:53
同学你好，书写正则表达式。在if条件中分别判断每一种情况，可以参考：
（1）如果输入的密码满足条件，内容是纯数字、纯字母或者纯符号，密码强度为低，输入框后面的小方块不变；也就是第一个显示为红色时。例如：
/^[1-9]{6,20}$/.test(value)||/^[a-zA-Z]{6,20}$/.test(value)||/^\W{6,20}$/.test(value)
（2）如果是两种类型的结合，那么密码强度为一般，也就是第二块变为橘色；例如：
/^[1-9|a-z]{6,20}$/.test(value)||/^[\W|a-z]{6,20}$/.test(value)||/^[\W|1-9]{6,20}$/.test(value)
（3）如果是三种类型的结合，那么密码强度为高，第三块变为绿色。例如：
/\W[0-9a-zA-Z]*/.test(value)
希望能帮助到你，祝学习愉快！
相似问题
老师，密码的中强的正则改怎么写？
7
0
4
老师，求那个换密码颜色的js代码怎么写的啊，没有头绪
25
0
3
作业没做完啊没思路啊不知道怎么办了？
11
0
4
笔记怎么保存截图啊？
7
1
3
这两个公式怎么推导出来的？
40
0
13
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星