我觉得怪怪，又说不出来那里怪。老师帮看看。

来源：2-25 项目作业

6hEd

2021-02-04 17:15:40

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .register form {
            width: 800px;
            height: 300px;
            border: 3px orange solid;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            border-radius: 10px;
        }

        .register form table {
            /* border: 1px red solid; */
            margin-left: 100px;
            margin-top: 50px;
        }

        .register form table tr {
            height: 30px;
        }

        .register form table tr input {
            height: 23px;
            margin-left: 30px;
            border: 1px rgb(172, 172, 172) solid;
            border-radius: 3px;
            text-indent: 1em;
        }

        .register form table tr .userName span,
        .register form table tr .loginPassword span,
        .register form table tr .confirmPassword span {
            color: orange;
        }

        .register form table tr .userName,
        .register form table tr .loginPassword,
        .register form table tr .confirmPassword {
            font-weight: bold;
        }

        .alertLoginPassword li {
            float: left;
            list-style: none;
            margin-left: 10px;
            width: 50px;
            height: 10px;
            /* display: none; */
        }

        .alertLoginPassword li:nth-of-type(1) {
            background-color: rgb(212, 211, 211);
        }

        .alertLoginPassword li:nth-of-type(2) {
            background-color: rgb(212, 211, 211);
        }

        .alertLoginPassword li:nth-of-type(3) {
            background-color: rgb(212, 211, 211);
        }

        .register form button {
            width: 210px;
            height: 30px;
            background-color: rgb(255, 136, 0);
            border: none;
            position: absolute;
            left: 0;
            bottom: 50px;
            margin-left: 200px;
            font-size: 18px;
            color: #fff;
            border-radius: 5px;
            border: 2px orange solid;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="register">
        <form action="">
            <table>
                <tr>
                    <td class="userName"><span>*</span>用户名 : </td>
                    <td>
                        <input type="text">
                    </td>
                    <td>
                        <span class="alertUserName"></span>
                    </td>
                </tr>
                <tr>
                    <td class="loginPassword"><span>*</span>登陆密码 : </td>
                    <td>
                        <input type="password">
                    </td>
                    <td>
                        <ul class="alertLoginPassword">
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td class="confirmPassword"><span>*</span>确认密码 : </td>
                    <td>
                        <input type="password">
                    </td>
                    <td>
                        <span class="alertConfirmPassword"></span>
                    </td>
                </tr>
            </table>
            <button id="submit" type="button">注册</button>
        </form>
    </div>
    <script>
        var namePass=false;
        var pwPass=false;

        var oinputUserName = document.querySelectorAll('input')[0];
        var oAlertUserName = document.querySelector('.alertUserName');

        var oinputPassword = document.querySelectorAll('input')[1];
        var oAlertLoginPassword = document.querySelector('.alertLoginPassword');

        var oConfirmPassword = document.querySelectorAll('input')[2];
        var oAlertConfirmPassword = document.querySelector('.alertConfirmPassword');

        oinputUserName.onblur = function () {
            var regExp = /^[a-zA-Z]\w{5,29}$/;
            if (regExp.test(oinputUserName.value) == false) {
                oAlertUserName.innerHTML = '&nbsp;&nbsp;6-30位字母、数字或_， 以字母开头';
                oAlertUserName.style.color = '#f40';
                namePass = false;
            } else {
                oAlertUserName.innerHTML = '&nbsp;&nbsp;用户名输入正确';
                oAlertUserName.style.color = 'green';
                namePass = true;
            }
        }

        oinputPassword.onblur = function () {
            var regExp = /^[a-zA-Z0-9]{6,20}$/;
            if (regExp.test(oinputPassword.value) == false) {
                oAlertLoginPassword.innerHTML = '&nbsp;&nbsp;6-20位字母或数字';
                oAlertLoginPassword.style.color = '#f40';
                pwPass = false;
            }else{
                pwPass = true;
            }
        }

        oinputPassword.onkeyup = function () {
            oAlertLoginPassword.innerHTML = '<li></li><li></li><li></li>';
            var olis = document.querySelectorAll('li');
            var regExp1 = /[a-z]+/;
            var regExp2 = /[A-Z]+/;
            var regExp3 = /[0-9]+/;
            var value = oinputPassword.value;
            var count = 0;
            if (regExp1.test(value) == true) {
                count++;
            }
            if (regExp2.test(value) == true) {
                count++;
            }
            if (regExp3.test(value) == true) {
                count++;
            }
            if (count == 1) {
                olis[0].style.backgroundColor = 'red';
            }
            if (count == 2) {
                olis[0].style.backgroundColor = 'red';
                olis[1].style.backgroundColor = 'orange';
            }
            if (count == 3) {
                olis[0].style.backgroundColor = 'red';
                olis[1].style.backgroundColor = 'orange';
                olis[2].style.backgroundColor = 'green';
            }
            if(oConfirmPassword.value!=''){
                oConfirmPassword.onblur();
            }
        }

        oConfirmPassword.onblur = function (){
            if(oinputPassword.value!=oConfirmPassword.value){
                oAlertConfirmPassword.innerHTML='&nbsp;&nbsp;两次密码输入不一致，请重新输入';
                oAlertConfirmPassword.style.color='red';
                pwPass = false;
            }else{
                oAlertConfirmPassword.innerHTML='&nbsp;&nbsp;两次输入一致';
                oAlertConfirmPassword.style.color='green';
                pwPass = true;
            }
        }

        var submitBtn = document.getElementById('submit');
        submitBtn.onclick = function () {
            if(oinputPassword.value!=oConfirmPassword.value){
                oAlertConfirmPassword.innerHTML='&nbsp;&nbsp;两次密码输入不一致，请重新输入';
                oAlertConfirmPassword.style.color='red';
                pwPass = false;
            }
            if(pwPass && namePass){
                alert('信息填写正确');
            }else{
                alert('请填写正确的信息');
            }
        }

    </script>
</body>

</html>