<div>

        <div>

            <i>*</i>用户名

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

            <span class="usertips" id="usertips">6-30位字母、数字或_,以字母开头</span>

        </div>

        <div class="psw">

            <i>*</i>登录密码

            <input type="password" placeholder="6-20位字母或数字组成" class="pw" id="pw">

            <ul id="ul">

                <li></li>

                <li></li>

                <li></li>

            </ul>

            <span class="pwtips" id="pwtips">6-20位字母或数字</span>

        </div>

        <div>

            <i>*</i>确认密码

            <input type="password" placeholder="再次输入您的登录密码" class="pw2" id="pw2">

            <span class="pw2tips" id="pw2tips">输入框不能为空</span>

        </div>

        <input type="button" id="submit" class="submit" value="注册">

    </div>

    <script>

        var user = document.getElementById("user");

        var usertips = document.getElementById("usertips");

        var pw = document.getElementById("pw");

        var pwtips = document.getElementById("pwtips");

        var ul = document.getElementById("ul");

        var pw2 = document.getElementById("pw2");

        var pw2tips = document.getElementById("pw2tips");

        var submit = document.getElementById("submit");

        user.onblur = function () {

            if (/^[a-zA-Z]\w{5,29}$/.test(user.value)) {

                usertips.innerText = "用户名输入正确";

                usertips.style.color = "#2bdb4a";

            } else {

                usertips.innerText = "6-30位字母、数字或’_’，字母开头";

                usertips.style.color = "red";

            }

        }

        pw.onblur = function () {

            if (/^[a-zA-Z0-9]{6,20}$/.test(pw.value)) {

                pwtips.style.display = "none";

                pw2tips.innerText = "";

                if (/^[a-z]{6,20}$|^[A-Z]{6,20}$|^\d{6,20}$/.test(pw.value)) {

                    ul.children[0].style.backgroundColor = "red";

                    ul.children[1].style.backgroundColor = "gray";

                    ul.children[2].style.backgroundColor = "gray";

                } else if (/^[a-zA-Z]{6,20}$|^[a-z0-9]{6,20}$|^[A-Z0-9]{6,20}$/.test(pw.value)) {

                    ul.children[0].style.backgroundColor = "red";

                    ul.children[1].style.backgroundColor = "orange";

                    ul.children[2].style.backgroundColor = "gray";

                } else {

                    ul.children[0].style.backgroundColor = "red";

                    ul.children[1].style.backgroundColor = "orange";

                    ul.children[2].style.backgroundColor = "green";

                }

            } else {

                pwtips.innerText = "6-20位字母或数字";

                pwtips.style.color = "red";

                pwtips.style.display = "block";

                ul.children[0].style.backgroundColor = "gray";

            }

        }

        pw2.onfocus = function () {

            if (!pw.value) {

                pw2tips.innerText = "请先输入注册密码";

                pw2tips.style.display = "inline";

            }

        }

        pw2.onblur = function () {

            if (!pw2.value) {

                pw2tips.style.display = "inline";

            } else if (pw2.value != pw.value) {

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

                pw2tips.style.display = "inline";

            } else {

                pw2tips.innerText = "两次输入一致";

            }

        }

        submit.onclick = function(){

            if(/^[a-zA-Z]\w{5,29}$/.test(user.value) && /^[a-zA-Z0-9]{6,20}$/.test(pw.value) && pw2.value == pw.value){

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

            }else{

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

            }

        }