登陆密码输入框失去焦点效果

css

<style>
        input{
            width: 200px;
        }
        .warning {
            color: orange;
        }
        .tips{
            margin-left: 10px;
        }

        .tips span{
            display: inline-block;
            width: 40px;
            height: 6px;
            background-color: #dddddd;
            
        }
        .btn button{
            position: relative;
            width: 200px;
            height: 30px;
            left: 125px;
            top: 35px;
            background-color: orange;
            border: none;
            color: white;
        }
    </style>

html

<div>
        <p>
            用 户 名：<input type="text" id="nameField" placeholder="用户名设置成功后不可修改">
            <span class="warning" id="nameWarning">6-30位字母、数字或“_”，字母开头</span>
        </p>
        <p>
            登陆密码：<input type="password" id="password" placeholder="6-20位字母或数字">
        <span class="tips" id="ts"> 
            <span class="one" id="pass1"></span>
            <span class="two" id="pass2"></span>
            <span class="three" id="pass3"></span>
        </span>
        </p>
        
        <p>
            确认密码：<input type="password" id="copypassword" placeholder="请再次输入您的登陆密码">
            <span class="email1" id="copypassWarning"></span>
        </p>
    </div>
    <div class="btn">
        <button>注册</button>
    </div>
    <script>
        var nameField = document.getElementById('nameField');
        var nameWarning = document.getElementById('nameWarning');
        var password = document.getElementById('password');
        var ts = document.getElementById('ts');
        var pass1 = document.getElementById('pass1');
        var pass2 = document.getElementById('pass2');
        var pass3 = document.getElementById('pass3');
        var copypassword = document.getElementById('copypassword');
        var copypassWarning = document.getElementById('copypassWarning');

        // 用户名输入框失去焦点
        nameField.onblur = function () {
            if (/^[a-zA-Z]+(\d+)|(_)$/.test(nameField.value)) {
                //通过校验 
                nameWarning.innerHTML = '用户名输入正确';
                nameWarning.style.color = 'green';
            } else {
                // 没有通过校验
                nameWarning.innerHTML = '6-30位字母、数字或“_”，字母开头';
                nameWarning.style.color = 'red';
            }
        };

        // 登陆密码输入框失去焦点
        password.onabort = function(){
            if(/^[a-zA-Z\d]{6,20}$/.test(password.value)){
                //通过校验 
                if(/^(\d){6,20}|(a-z){6,20}|(A-Z){6,20}$/){
                    // 强度等级一
                    pass1.style.color = 'red';
                }else if(/^[\da-z]{6,20}|[/dA-Z]{6,20}|[a-z]{6,20}$/){
                    // 强度等级二
                    pass1.style.color = 'red';
                    pass1.style.color = 'orange';
                }else if(/^[\da-zA-Z]{6.20}$/){
                    // 强度等级三
                    pass1.style.color = 'red';
                    pass1.style.color = 'orange';
                }
            }else{
                // 没有通过校验
                ts.style.display = 'none';
                ts.style.innerHTML = '6-20位字母或数字';
                ts.style.color = 'red';
            }
        }
    </script>

这一块写出来没有任何效果，请老师指点