老师这道题目怎么判断密码强度为等级二

怎么判断同时密码满足两种类型的结合，包括小写字母大写字母，小写字母数字，还有大写字母数字，并且还保持在6-20位，实在想不出来，老师帮我改改代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        i{
            font-style: normal;
            color: gray;
            padding-right: 5px;
            position: relative;
            top: 3px;
        }
        .box{
            width: 600px;
            height: 200px;
            padding: 50px;
            border: 1px solid orange;
            border-radius: 10px;
            position: relative;
            margin: 50px auto;
        }
        .box .tl{
            font-size: 14px;
        }
        .box .nbsp{
            width: 7px;
            display: inline-block;
        }
        .box input[type="text"]{
            width: 180px;
            margin-left: 10px;
            font-size: 12px;
            height: 23px;
            border-radius: 3px;
            padding-left: 5px;
            border: 1px solid gray;
        }
        .box .user-warning{
            color: green;
            font-size: 14px;
            padding-left: 5px;
        }
        .box .password-warning-text{
            color: red;
            font-size: 14px;
            padding-left: 5px;
            display: none;
        }
        .box .password-warning-box{
            padding-left: 5px;
        }
        .box .password-warning-box span{
            width: 40px;
            height: 6px;
            background-color: #ccc;
            display: inline-block;
        }
        .box .confirm_warning{
            font-size: 14px;
            color: red;
            padding-left: 5px;
            display: none;
        }
        .regis_btn{
            width: 180px;
            height: 35px;
            background-color: green;
            outline: none;
            border: none;
            border-radius: 5px;
            color: #fff;
            font-size: 14px;
            position: absolute;
            bottom: 30px;
            left: 240px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>
            <i>*</i><span class="tl">用<span class="nbsp"></span>户<span class="nbsp"></span>名 :</span> 
            <input type="text" placeholder="用户名设置成功后不可更改" id="userField">
            <span class="user-warning">6-30位字母、数字或"_"，字母开头</span>
        </p>
        <p>
            <i>*</i><span class="tl">登录密码 :</span>
            <input type="text" placeholder="6-20位字母或数字" id="passwordField">
            <span class="password-warning-text">6-20位字母或数字</span>
            <span class="password-warning-box">
                <span></span>
                <span></span>
                <span></span>
            </span>
        </p>
        <p>
            <i>*</i><span class="tl">确认密码 :</span>
            <input type="text" placeholder="再次输入您的登录密码">
            <span class="confirm_warning">输入框不能为空</span>
        </p>
        <button class="regis_btn">注册</button>
    </div>
    <script>
        var userField=document.getElementById('userField');
        var userWarning=document.querySelector('.user-warning');
        //判断用户名是否输入正确
        userField.onblur=function(){
            var user=userField.value;
            if(/^[a-zA-Z]\w{5,30}$/.test(user)){
                userWarning.innerText='用户名输入正确';
                userWarning.style.color='green';
                console.log('成立')
            }else{
                userWarning.innerText='6-30位字母、数字或"_"，字母开头';
                userWarning.style.color='red';
                console.log('不成立')
            }
        }
        //判断密码是否输入正确
        var passwordField=document.getElementById('passwordField');
        var passwordText=document.querySelector('.password-warning-text');
        var passwordWarningBox=document.querySelector('.password-warning-box');
        var passwordWarnings=document.querySelectorAll('.password-warning-box span');

        passwordField.onblur=function(){
            var password=passwordField.value;
            if(/^[a-zA-Z0-9]{6,20}$/.test(password)){
                //验证输入的密码条件
                passwordText.style.display='none';
                passwordWarningBox.style.display='inline-block';
                //判断密码强度等级为一
                if(/^[a-z]{6,20}$|^[A-Z]{6,20}$|^[0-9]{6,20}$/.test(password)){
                    console.log('等级1')
                    passwordWarnings[0].style.background='red';
                }
                //判断密码强度等级为二
                if(/^[a-z][0-9]{6,20}$/.test(password)){
                    console.log('等级2')
                    passwordWarnings[1].style.background='orange';
                }
            }else{
                //密码不符合条件
                passwordText.style.display='inline';
                passwordWarningBox.style.display='none';
            }
        }
    </script>
</body>
</html>

慕函数0445997 2022-11-30

源自：正则表达式 2-25 项目作业