一个自定义的手机号码、密码验证登录

html部分

<div class="big" style="margin: 0 auto;width: 400px;">
        <table>
            <tr>
                <td colspan="3" style="text-align: center; font-weight: bolder;font-size: large;">账户登陆
                </td>
            </tr>
            <tr>
                <td>
                    手机号：
                </td>
                <td>
                    <input type="text" class="shouji" style="width: 200px;outline: none;">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="shoujihao" style="height: 30px;font-size:12px;color: red;"> </div>
                </td>
            </tr>
            <tr>
                <td>
                    密&nbsp;&nbsp;码：
                </td>
                <td style="width: 300px;">
                    <input type="password" class="mima" style="width: 200px;outline: none;">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="mimayan" style="width: 300px;height: 30px;font-size:12px;color: red;">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    验证码：
                </td>
                <td>
                    <input type="text" class="yanzhengma" style="width: 80px;outline: none;">
                    <div class="box" style="width: 20px;height: 30px;display: inline;">
                    </div><button class="huanyige">
                        换一个
                    </button>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="yanzhengmats" style="height: 30px;font-size:12px;color: red;">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center; font-weight: bolder;font-size: large;">
                    <button class="enter">
                        登陆
                    </button>
                    
                </td>
            </tr>
        </table>
    </div>

js部分

 // 获取节点
        var shouji = document.querySelector('.shouji')
        var mima = document.querySelector('.mima')
        var yzm = document.querySelector('.box')
        var enter = document.querySelector('.enter')
        var huanyige = document.querySelector('.huanyige')
        var yanzhengma = document.querySelector('.yanzhengma')
        var shoujihao = document.querySelector('.shoujihao')
        var mimayan = document.querySelector('.mimayan')
        var yanzhengmats = document.querySelector('.yanzhengmats')
        function yanzhengmax(n) {
            var code = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
                'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
                'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
                'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
                'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
                'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
                'w', 'x', 'y', 'z'];
            var new1 = [];
            var shenglue = [0, 1, 'i', 'I', 'l', 'o', 'O'];
            for (var i = 0; i < n; i++) {//生成一个随机下标
                var rt = Math.floor(Math.random() * code.length);//通过随机下标获取元素
                var ele = code[rt];
                if (shenglue.indexOf(ele) === -1) {
                    new1.push(ele);
                } else {
                    i--;
                    //重新生成
                }
            }
            var new2 = new1.join('')
            return new2;
        }
        yzm.innerHTML = yanzhengmax(4);
        enter.onclick = function () {
            var shoujihaoma = /^1[3-9]\d{9}$/
            var mimayanzheng = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[0-9A-Za-z.?!@#]{6,16}$/
            if (!shoujihaoma.test(shouji.value)) {
                shoujihao.innerHTML = '手机号输入不正确'
            }
            else {
                shoujihao.innerHTML = ''
            }
            if (!mimayanzheng.test(mima.value)) {
                mimayan.innerHTML = '密码必须含有大小写字母，数字，可由数字字?!@#组成(6-16位)'
            }
            else {
                mimayan.innerHTML = ''
            }
            if (yanzhengma.value !== yzm.innerHTML) {
                yanzhengmats.innerHTML = '验证码输入不正确'
            }
            else {
                alert("登陆成功")
            }
            
        }
        
        // 重新生成随机数
        huanyige.onclick = function () {
            yzm.innerHTML = yanzhengmax(4);
        }