正则表达式（3） -- 表单验证案例

功能需求：

1. 如果用户名输入合法，则后面提示信息为：用户名合法，并且颜色为绿色
2. 如果用户名输入不合法，则后面提示信息为：用户名不符合规范，并且颜色为红色

分析：

3. 用户名只能为英文字母，数字，下划线，或者短横线组成，并且用户名长度为6~16位
4. 首先准备好这种正则表达式模式
5. 当表单失去焦点就开始验证
6. 如果符合正则规范，则让后面的span 标签添加right类
7. 如果不符合正则规范，则让后面的span 标签添加wrong 类

部分代码

reg.js:

window.onload = function() {
    var telreg = /^1[3|4|5|7|8]\d{9}$/; //手机号码的正则表达式
    var tel = document.querySelector('#tel');

    var qqreg = /^[1-9]\d{4,}$/; //qq号的正则表达式
    var qq = document.querySelector('#qq');

    var ncreg = /^[\u4e00-\u9fa5]{2,8}$/; //昵称的正则表达式
    var nc = document.querySelector('#nc');

    var msgreg = /^\d{6}$/; //短信验证码
    var msg = document.querySelector('#msg');

    var pwdreg = /^[a-zA-Z0-9_-]{6,16}$/; // 登录密码正则表达式
    var pwd = document.querySelector('#pwd');

    var surepwd = document.querySelector('#surepwd'); // 确认密码

    regexp(tel, telreg); //手机号码验证
    regexp(qq, qqreg); //qq号码验证
    regexp(nc, ncreg); //昵称验证
    regexp(msg, msgreg); //短信验证码验证
    regexp(pwd, pwdreg); //登录密码验证



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

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

}