4-正则表达式验证案例

用户名表单验证

功能需求:

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

// 获取元素
var txt = document.querySelector('#txt');
// 创建正则
var reg = /^[a-zA-Z0-9]{6,8}$/;
// 添加事件
txt.onblur = function () {
    if ( reg.test(this.value) ) {
        this.nextElementSibling.className = 'right';
        this.nextElementSibling.innerHTML = '用户名合法';
    } else {
        this.nextElementSibling.className = 'error';
        this.nextElementSibling.innerHTML = '用户名不符合规范';
    }
}

常用验证案例

手机验证：

var tel = document.getElementById('tel');
var regtel = /^[1][3|4|5|7|8][0-9]{9}$/;
tel.onblur = function () {

    if (regtel.test(tel.value)) {
        this.nextElementSibling.className = 'success';
        this.nextElementSibling.innerHTML = '手机输入正确<i class="success_icon"></i>';
        console.log(123);
    } else {
        tel.nextElementSibling.className = 'error';
        tel.nextElementSibling.innerHTML = '手机输入错误<i class="error_icon"></i>';
        console.log(456)
    }
}

QQ验证：

var regqq = /^[1-9][0-9]{4,}$/;
var regtel = /^1[3|4|5|7|8][0-9]{9}$/;
var regqq = /^[1-9][0-9]{4,}$/;

function jiance (obj, reg) {
    obj.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> 输入错误';
        }
    }
}

jiance(tel,regtel);
jiance(qq,regqq);

昵称验证：

var nikName = /^[\u4e00-\u9fa5]{2,8}$/;

短信验证：

var regmsg = /^[0-9]{6}$/;