密码强度那块怎么做啊？不知道怎么写了

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}$/){
}
}
}

Clover丶三叶草 2019-08-25

源自：项目：JS表单验证案例 3-10 作业题

收起

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-31 14:10:13

/^[1-9|a-z]{6,20}$/和/^[1-9a-z]{6,20}$/

1-9|a-z表示匹配1-9的数字或者是a-z的字母，正则语法是：x|y表示匹配x或者y，例如，/green|red/匹配“green apple”中的‘green’和“red apple”中的‘red’，[1-9a-z]是匹配1-9的数字和a-z的字母，如果是[1-9a-z]，那么green apple”和“red apple”将全部被匹配到

希望可以帮到你！

收起回答

Edward666 #1

老师能不能给我举个更加明了的例子啊？我自己试，感觉效果都一样啊！

2019-09-01 09:12:42
好帮手慕码回复 Edward666 #2

上面回复同学了哦，同学快去看一下吧~

2019-09-01 10:34:49

好帮手慕糖 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)

希望能帮助到你，祝学习愉快！

收起回答

Edward666 #1

老师我想问一下/^[1-9|a-z]{6,20}$/和/^[1-9a-z]{6,20}$/这两个正则表达式是一个意思吗？如果不同有什么不同啊？

2019-08-30 22:26:06
Edward666 #2

第三种类型不限制字符数量吗？

2019-08-30 22:39:42