用正则表达式完成简单的注册功能

如何验证注册时输入的内容，推荐使用正则表达式。
要求：
1、用户名输入框，正确的条件是：6-30位字母、数字或_， 以字母开头。
（1） 如果输入内容的不满足条件时，输入框后面的提示内容为。6-30位字母、数字或’_’，字母开头，且字体颜色变为红色。
（2） 如果输入的满足条件，输入框后面的提示内容为：“用户名输入正确”，且字体颜色变成绿色。
2、密码输入框，正确的条件是：6-20位字母或数字组成
（1） 如果输入内容的不满足条件时，输入框下面给出提示内容为：6-20位字母或数字，且字体颜色变为红色。
（2） 如果输入的密码内容是纯数字、纯小写字母或者纯大写字母，密码强度为低，只有第一块变为红色。
（3） 如果是两种类型的结合，那么密码强度为一般，第二块变为橘色。
（4） 如果是三种类型的结合，那么密码强度为高，第三块变为绿色。
3、密码确认框，正确的条件是：与上面的密码输入框的内容一致。
（1） 如果为空，那么后面给出文字提示“输入框不能为空”，且字体颜色变为红色。
（2） 如果输入的密码跟上面的密码不一致，则提示“两次密码输入不一致，请重新输入”且字体颜色变为红色。
（3） 如果输入的密码跟上面一致，则提示“两次输入一致”。
4、满足所有的验证条件，点击下一步提示“信息填写正确”，否则提示“请填写正确的信息”

HTML代码块
<div class="reg-wrap">
        <!-- 用户名 -->
        <div class="felid nameFelid">
            <div class="star">*</div>
            <div class="textBox">
                <div class="text">用户名:</div>
                <input type="text" name="" id="name" placeholder="用户名设置后不可修改">
            </div>

            <div class="tishi warning1">6-30位字母、数字或‘_’,字母开头;</div>
        </div>

        <!-- 登录密码 -->
        <div class="felid passwordFelid">
            <div class="star">*</div>
            <div class="textBox">
                <div class="text">登录密码:</div>
                <input type="password" name="" id="password" placeholder="6-30位字母或数字">
            </div>
            <div class="colorFelid">
                <div class="color red"></div>
                <div class="color yellow"></div>
                <div class="color green"></div>
            </div>
            <!--填错时出现的提示-->
            <div class="tishi warning2">请输入6-20位字母或数字</div>
        </div>

        <!-- 确认密码 -->
        <div class="felid passwordFelid2">
            <div class="star">*</div>
            <div class="textBox">
                <div class="text">确认密码:</div>
                <input type="password" name="" id="passwords" placeholder="再次输入您的密码">
            </div>
            <div class="tishi warning3">两次输入一致</div>

        </div>
        <!-- 注册按钮 -->
        <div class="buttonFelid" id="reset">注册</div>
    </div>

CSS代码块
.reg-wrap {
            border: 2px solid rgb(255, 136, 1);
            height: 300px;
            width: 600px;
            border-radius: 10px;
            margin: 50px auto;
            padding: 50px 100px;
            font-size: 16px;
        }

        .reg-wrap .felid {
            position: relative;
            height: 40px;
            margin-top: 20px;
        }

        .reg-wrap .felid .star {
            color: rgb(255, 136, 1);
            height: 30px;
            line-height: 30px;
        }

        .reg-wrap .felid .textBox .text {
            height: 30px;
            line-height: 30px;
            width: 90px;
            text-align: justify;
            text-align-last: justify;

        }

        .reg-wrap .felid div {
            float: left;
        }

        .reg-wrap .felid input {
            margin-left: 10px;
            height: 30px;
            width: 180px;
            padding: 5px 10px;
            box-sizing: border-box;
            outline-color: transparent;
        }

        .reg-wrap .felid input:focus {
            outline-color: rgb(255, 136, 1);
        }

        .reg-wrap .tishi {
            margin-left: 10px;
            height: 30px;
            line-height: 30px;
        }

        .reg-wrap .colorFelid {
            height: 30px;
            width: 200px;
        }

        .warning2 {
            position: absolute;
            top: 30px;
            left: 100px;
            font-size: 15px;
            color: orangered;
            display: none;
        }

        .reg-wrap .colorFelid .color {
            width: 50px;
            height: 10px;
            margin-top: 10px;
            background-color: #ddd;
            margin-left: 10px;
        }

        .buttonFelid {
            height: 30px;
            width: 200px;
            background-color: rgb(255, 136, 1);
            color: #fff;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
            margin: 40px auto;
            cursor: pointer;
        }

JS代码块
// 得到三个输入框并设置全局value变量v1,v2,v3 得到提示信息 颜色条 按钮 
        var oName = document.getElementById('name');
        var oPassword = document.getElementById('password');
        var oPasswords = document.getElementById('passwords');
        var oWarning1 = document.getElementsByClassName('warning1')[0];
        var oWarning2 = document.getElementsByClassName('warning2')[0];
        var oWarning3 = document.getElementsByClassName('warning3')[0];
        var oColor = document.getElementsByClassName('color');
        var oReset = document.getElementById('reset');
        var v1, v2, v3;

        // 验证用户名：6-30位字母、数字或_,以字母开头
        //不满足条件，提示内容为：6-30位字母、数字或’_’，字母开头，且字体颜色变为红色。
        //满足条件，提示内容为：“用户名输入正确”，且字体颜色变成绿色。
        oName.onblur = function () {
            var regexp = /^[a-zA-Z]\w{5,29}$/;
            if (!regexp.test(oName.value)) {
                console.log(false);
                v1 = false;
                oWarning1.innerText = '6-30位字母、数字或‘_’,字母开头';
                oWarning1.style.color = 'red';
            } else {
                v1 = true;
                console.log(true);
                oWarning1.innerText = '用户名格式正确';
                oWarning1.style.color = 'green';
            }
        }

        // 验证登录密码:6-20位字母或数字组成
        // 不满足条件,提示:6-20位字母或数字，且字体颜色变为红色。
        //输入的密码内容是纯数字、纯小写字母或者纯大写字母，密码强度为低，只有第一块变为红色。
        //两种类型的结合，那么密码强度为一般，第二块变为橘色。
        //是三种类型的结合，那么密码强度为高，第三块变为绿色。
        oPassword.onblur = function () {
            //判断密码位数够不够
            var regexp1 = /^[a-zA-Z0-9]{6,20}$/;
            //只有一种格式
            var regexp2 = /^[a-z]{6,20}$|^[A-Z]{6,20}$|^\d{6,20}$/;
            //两种格式
            var regexp3 = /^[a-zA-Z]{6,20}$|^[0-9a-z]{6,20}$|^[0-9A-Z]{6,20}$/;
            //三种格式
            var regexp4 = /^[a-zA-Z0-9]{6,20}$/;

            if (!regexp1.test(oPassword.value)) {
                console.log(regexp1);
                // 位数不够
                v2 = false;
                oColor[0].style.backgroundColor = '#ddd';
                oColor[1].style.backgroundColor = '#ddd';
                oColor[2].style.backgroundColor = '#ddd';
                oWarning2.style.display = 'block';

            } else if (regexp2.test(oPassword.value)) {
                //只有一种格式
                v2 = true;
                oColor[0].style.backgroundColor = 'red';
                oColor[1].style.backgroundColor = '#ddd';
                oColor[2].style.backgroundColor = '#ddd';
                oWarning1.style.display = 'none';
            } else if (regexp3.test(oPassword.value)) {
                //两种格式
                v2 = true;
                oColor[0].style.backgroundColor = 'red';
                oColor[1].style.backgroundColor = 'green';
                oColor[2].style.backgroundColor = '#ddd';
                oWarning2.style.display = 'none';
            } else if (regexp4.test(oPassword.value)) {
                //三种格式
                v2 = true;
                oColor[0].style.backgroundColor = 'red';
                oColor[1].style.backgroundColor = 'green';
                oColor[2].style.backgroundColor = 'yellow';
                oWarning2.style.display = 'none';
            }
        }

        // 密码确认框:与上面的密码输入框的内容一致。
        // 为空，提示“输入框不能为空”，且字体颜色变为红色。
        // 密码跟上面的不一致，则提示“两次密码输入不一致，请重新输入”且字体颜色变红
        // 密码跟上面一致，则提示“两次输入一致”。
        oPasswords.onblur = function () {
            if (oPasswords.value == '') {
                v3 = false;
                oWarning3.innerText = '输入框不能为空';
                oWarning3.style.color = 'red';
            } else if (oPasswords.value != oPassword.value) {
                v3 = false;
                oWarning3.innerText = '两次密码输入不一致，请重新输入';
                oWarning3.style.color = 'red';
            } else if (oPasswords.value == oPassword.value) {
                v3 = true;
                oWarning3.innerText = '两次输入一致';
                oWarning3.style.color = 'green';
            }
        }

        // 注册提交按钮
        // 满足所有的验证条件，点击下一步提示“信息填写正确”，否则提示“请填写正确的信息”
        oReset.onclick = function () {
            if (v1 && v2 && v3) {
                alert('信息填写正确');
            } else {
                alert('请填写正确的信息');
            }
        }