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

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

---

功能需求：

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

---

页面展示：

---

案例分析：

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

核心代码：

<input type="text" class="uname">
<span>请输入用户名</span>
<script>
    var reg = /^[a-zA-Z0-9_-]{6,16}$/;
    var uname = document.querySelector('.uname');
    var span = document.querySelector('span');
    uname.onblur = function () {
        if (reg.test(this.value)) {
            console.log('正确的');
            span.className = 'right';
            span.innerHTML = '用户名格式输入正确';
        } else {
            console.log('错误的');
            span.className = 'wrong';
            span.innerHTML = '用户名格式输入不正确';
        }
    }
</script>

源码下载

https://download.csdn.net/download/chuenst/13773316