写在前面：刚回顾完正则表达式正则基础，就来对表单下手啦。本文用正则表达式进行一些表单的基础验证，同时验证密码时展示密码强弱。希望跟大家多多交流。

1. 效果展示

2. demo分析

2.1 功能：

1. 如果用户名输入合法, 则后面提示信息为: 验证通过,并且颜色为绿色
2. 如果用户名输入不合法, 则后面提示信息为: 验证失败, 并且颜色为红色
3. 当密码状态发生改变时，提示用户密码安全程度

2.2 思路:

1. 定义验证不同板块的不同正则规范
2. 因为验证思路一致，故把验证机制封装为函数
3. 当表单中按键弹起就开始验证.
4. 如果符合正则规范, 则让后面的span标签添加 success类.
5. 如果不符合正则规范, 则让后面的span标签添加 error类.
6. 密码强弱程度单独判断
7. 最后确认两次密码是否一致

开始撸

此处html、css部分省略，怕你们嫌弃，哈哈哈。
直接上js代码好吧，毕竟注释超级超级超级清晰

//等dom渲染完毕
window.addEventListener('load', function() {
    // 获取元素
    var tel = document.querySelector('#tel');
    var qq = document.querySelector('#qq');
    var name = document.querySelector('#name');
    var msg = document.querySelector('#msg');
    var pwd = document.querySelector('#pwd');
    var surepwd = document.querySelector('#surepwd');
    var safe = document.querySelector('.safe');

    // 定义正则
    var regTel = /^1[3|4|5|7|8][0-9]{9}$/;
    var regQq = /^[1-9][0-9]{4,}$/;
    var regName = /^[\u4e00-\u9fa5]{3,6}$/;
    var regMsg = /^\d{6}$/;
    var regPwd = /^[a-zA-Z0-9\W]{6,16}$/;

    // 判断密码强度正则（纯字母、数字、字符）
    var regNum = /^\d+$/;
    var regLetter = /^[a-zA-Z]+$/;
    var regSpe = /^\W+$/;

    // 包含（纯字母、数字、字符）
    var _regNum = /\d+/;
    var _regLetter = /[a-zA-Z]+/;
    var _regSpe = /\W+/;

    // 调用验证函数
    getReg(tel, regTel);
    getReg(qq, regQq);
    getReg(name, regName);
    getReg(msg, regMsg);
    getReg(pwd, regPwd);

    // 封装验证函数
    function getReg(obj, myreg) {
        obj.addEventListener('keyup', function() {
            // 如果文本框内容为空，对验证提示进行隐藏。否则显示
            if (obj.value.trim() == 0) {
                this.nextElementSibling.style.display = 'none';
            } else {
                this.nextElementSibling.style.display = 'inline-block';
                // 验证通过改变兄的节点样式（正确），否则错误
                if (myreg.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>验证失败'
                }
            }

        })
    };


    // 密码强弱判断
    pwd.addEventListener('keyup', function() {
        var mypwd = this.value;
        // 循环去除上一次判断的样式
        for (var i = 0; i < safe.children.length; i++) {
            safe.children[i].className = 'zhong';
        };
        // 判断密码长度是否合格
        if (mypwd.length < 6) {
            return
        }
        // 如果满足纯数字，纯字母，纯字符任意一种。密码强度为弱（给弱添加样式）
        if (regNum.test(mypwd) || regLetter.test(mypwd) || regSpe.test(mypwd)) {
            safe.children[0].className = 'high';
            // 如果满足数字、字母、下划线组合。密码强度为强（给强添加样式）
        } else if (_regNum.test(mypwd) && _regLetter.test(mypwd) && _regSpe.test(mypwd)) {
            safe.children[2].className = 'high';
            // 否则为中（为其添加样式）
        } else {
            safe.children[1].className = 'high';
        }
    })

    // 验证两次密码是否一致（与验证函数相似）
    surepwd.addEventListener('keyup', 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>两次密码有偏差'
        }
    });
})