<div>

        <p>

            * 用户名：

            <input type="text" id="xm" placeholder="用户名设置成功后不可更改">

            <i id="xmts"></i>

        </p>

    </div>

    <div id="boxs">

        <p>

            * 登录密码：

            <input type="text" id="mm" placeholder="6-20位字母或数字">

            <span class="color"></span>

            <span class="color"></span>

            <span class="color"></span>

        </p>

        <p id="mmts">6-20位字母或数字</p>

    </div>

    <div>

        <p>

            * 确认密码：

            <input type="text" id="qrmm" placeholder="再次输入您的登录密码">

            <i id="qrmmts"></i>

        </p>

    </div>

    <div>

        <input type="submit" value="注册" id="zc">

    </div>

    <script>

        var xm=document.getElementById('xm');

        var xmts=document.getElementById('xmts');

        var mm=document.getElementById('mm');

        var mmts=document.getElementById('mmts');

        var spans=document.getElementsByTagName('span');

        var qrmm = document.getElementById('qrmm');

        var zc = document.getElementById('zc');

        var qrmmts = document.getElementById('qrmmts');

        // 用户名事件

        var name;

        xm.onchange=function(){

             name=xm.value;

            if(/^[A-Za-z]\w{5,29}$/.test(name)){

                xmts.innerHTML='用户名正确';

                xmts.style.color='green';

            }else{

                xmts.innerHTML='6-30位字母、数字或’_’';

                xmts.style.color='red';

            }

        }

        // 密码函数

        var pow;

        function mmhs(){

             pow=mm.value;

            if(/^[A-Za-z0-9]{6,20}$/.test(pow)){

                mmts.style.display='none';

                if(/[A-Z]/.test(pow)&&/[a-z]/.test(pow)&&/[0-9]/.test(pow)){

                    spans[0].style.backgroundColor='red';

                    spans[1].style.backgroundColor='orange';

                    spans[2].style.backgroundColor='green';

                }else if(/[A-Z]/.test(pow)&&/[a-z]/.test(pow)||/[A-Z]/.test(pow)&&/[0-9]/.test(pow||/[a-z]/.test(pow)&&/[0-9]/.test(pow))){

                    spans[0].style.backgroundColor='red';

                    spans[1].style.backgroundColor='orange';

                    spans[2].style.backgroundColor='green';

                }else if(/\d{6,20} || [A-Z]{6,20} || [a-z]{6,20}/.test(pow)){

                    spans[0].style.backgroundColor='red';

                    spans[1].style.backgroundColor='orange';

                    spans[2].style.backgroundColor='green';

                }

            }else{

                mmts.style.display='inline';

                mmts.style.color='red';

            }

        }

        // 密码事件

        mm.onchange=function(){

            for(var i=0; i<spans.length;i++){

                spans[i].style.backgroundColor = 'rgba(204, 204, 204, 0.274)';

            }

            mmhs();

        }

        // 确认密码函数

        var qrpow

        function qrmmhs(){

            qrpow=qrmm.value;

            if(qrpow==''){

                qrmmts.innerText='输入的密码不能为空';

                qrmmts.style.color = 'red';

            }else{

                if(pow==qrpow){

                    qrmmts.style.color = 'black';

                    qrmmts.innerText = '两次输入一致';

                }else if(qrpow!=pow){

                    qrmmts.innerText = '两次密码输入不一致，请重新输入';

                    qrmmts.style.color = 'red';

                }

            }

        }

        // 确认密码事件

        qrmm.onblur=function(){

            qrmmts.innerText = '';

            qrmmts.style.color = 'black';

            qrmmhs();

        }

        // 注册事件

        zc.onclick=function(){

            name=xm.value;

            pow=mm.value;

            qrpow=qrmm.value;

            if (/^[A-Za-z]\w{5,29}$/.test(name) && /^[A-Za-z0-9]{6,20}$/.test(pow) && qrpow == pow) {

                alert('信息填写正确');

            } else {

                alert('请填写正确的信息');

            }

        }

    </script>