正则表达式案例：表单验证

正则表达式案例：表单验证

需求：
（1）表单失去焦点，进行验证。
（2）如果输入内容为空，提醒用户输入内容。
（3）输入内容后，开始进行表单验证，成功，提示用户输入正确，失败，提醒用户重新输入。

html 代码：

<div class="registerarea">
    <h3>注册新用户
        <div class="login">我有账号，去<a href="#">登陆</a></div>
    </h3>
    <div class="reg_form">
        <form action="">
            <ul>
                <li>
                    <label for="">手机号：</label>
                    <input type="tel" class="inp" id="tel">
                    <span class=" "> </span>
                </li>
                <li>
                    <label for="">QQ:</label>
                    <input type="text" class="inp" id="qq">
                    <span></span>
                </li>
                <li>
                    <label for="">昵称:</label>
                    <input type="text" class="inp" id="nc">
                    <span></span>
                </li>
                <li>
                    <label for="">短信验证码：</label>
                    <input type="text" class="inp" id="msg">
                    <span class=" ">
                        <!-- <i class=" success_icon"></i> 短信验证码输入正确 -->
                    </span>
                </li>
                <li>
                    <label for="">登录密码：</label>
                    <input type="password" class="inp" id="pwd">
                    <span class=" ">
                        <!-- <i class="error_icon"></i> 密码不少于6位数，请重新输入 -->
                    </span>
                </li>
                <li class="safe">安全程度 <em class="ruo">弱</em>
                    <em class="zhong">中</em> <em class="qiang">强</em>
                </li>
                <li>
                    <label for="">确认密码：</label>
                    <input type="password" class="inp" id="surepwd">
                    <span class=" ">
                        <!-- <i class="error_icon"></i> 密码不一致，请重新输入 -->
                    </span>
                </li>
                <li class="agree">
                    <input type="checkbox" name="" id="">同意协议并注册
                    <a href="#">《同意用户协议》</a>
                </li>
                <li>
                    <input type="submit" value="完成注册" class="btn">
                </li>
            </ul>
        </form>
    </div>
</div>

CSS 代码：

.registerarea {
    height: 582px;
    border: 1px solid #ccc;
    margin-top: 20px;
}
.registerarea h3 {
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    line-height: 42px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 400;
}
.login {
    float: right;
    font-size: 14px;
}
.login a {
    color: #cb323b;
}
.reg_form {
    width: 600px;
    margin: 50px auto 0;
}
.reg_form ul li {
    margin-bottom: 20px;
}
.reg_form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
}
.reg_form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}
.reg_form ul li .error {
    color: #df3033;
}
.error_icon,
.success_icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../images/error.png) no-repeat;
    margin-top: -2px;
}
.success {
    color: green;
}
.success_icon {
    background: url(../images/success.png) no-repeat;
}
.safe {
    padding-left: 170px;
}
.safe em {
    padding: 0 12px;
}
.ruo {
    background-color: #de1111;
}
.zhong {
    background-color: #40b83f;
}
.qiang {
    background-color: #f79100;
}
.agree {
    padding-left: 95px;
}
.agree input {
    vertical-align: middle;
}
.agree a {
    color: #1ba1e6;
}
.btn {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    font-size: 14px;
    color: #fff;
    margin: 0 0 0 95px;
}

JS 代码：

window.onload = function () {
    // 1.正则表达式
    var regtel = /^1[3|4|5|7|8]\d{9}$/;  // 手机号码的正则表达式
    var regqq = /^[1-9]\d{4,}$/;   // 10000
    var regnc = /^[\u4e00-\u9fa5]{2,8}$/;
    var regmsg = /^\d{6}$/;
    var regpwd = /^[a-zA-z0-9_-]{6,16}$/;
    // 2.获取元素
    var tel = document.querySelector('#tel');
    var qq = document.querySelector('#qq');
    var nc = document.querySelector('#nc');
    var msg = document.querySelector('#msg');
    var pwd = document.querySelector('#pwd');
    var surepwd = document.querySelector('#surepwd');
    // 3.调用函数
    regexp(tel, regtel);  // 手机号码
    regexp(qq, regqq);    // qq号码
    regexp(nc, regnc);    // 昵称
    regexp(msg, regmsg);  // 短信验证码
    regexp(pwd, regpwd);  // 密码框

    // 表单验证的函数
    function regexp(ele, reg) {
        ele.onblur = function () {
            if (this.value !== '') {
                if (reg.test(this.value)) {
                    // console.log('正确的');
                    this.nextElementSibling.className = 'success';
                    this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
                } else {
                    // console.log('不正确');
                    this.nextElementSibling.className = 'error';
                    this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确，请重新输入';
                }
            } else {
                this.nextElementSibling.innerHTML = '请输入内容';
            }
        };
    };

    surepwd.onblur = function () {
        if (this.value !== '') {
            if (this.value === pwd.value) {
                this.nextElementSibling.className = 'success';
                this.nextElementSibling.innerHTML = '<iclass="success_icon"></iclass=> 恭喜您输入正确';
            } else {
                this.nextElementSibling.className = 'error';
                this.nextElementSibling.innerHTML = '<iclass="error_icon"></iclass=> 两次密码输入不一致';
            }
        } else {
            this.nextElementSibling.innerHTML = '请输入内容';
        }
    };
};