正则表达式案例：用户名验证

_Tough_Girl

已于 2022-09-17 17:29:17 修改

阅读量8k

点赞数 3

分类专栏： JavaScript 案例文章标签：正则表达式 javascript

于 2021-08-19 00:04:15 首次发布

本文链接：https://blog.csdn.net/icemwj/article/details/119791777

版权

JavaScript 案例专栏收录该内容

22 篇文章 6 订阅

订阅专栏

案例：用户名验证

功能需求：

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

分析:

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

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户名验证</title>
    <style>
        span {
            color: #aaa;
            font-size: 14px;
        }

        .right {
            color: green;
        }

        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" class="uname"> <span>请输入用户名</span>
    <script>
        // 量词是设定某个模式出现的次数
        // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
        var regexp = /^[a-zA-Z0-9_-]{6,16}$/;   // {6,16}  中间不要有空格
        // console.log(regexp.test('a'));// false
        // console.log(regexp.test('18'));// false
        // console.log(regexp.test('aa'));// false
        // console.log('----------------------------------');
        // console.log(regexp.test('andy-red'));// true
        // console.log(regexp.test('andy_red'));// true
        // console.log(regexp.test('andy007'));// true
        // console.log(regexp.test('andy!007'));// false

        var uname = document.querySelector('.uname');
        var span = document.querySelector('span');
        uname.onblur = function () {
            if (regexp.test(this.value)) {
                console.log('正确的');
                span.className = 'right';
                span.innerHTML = '用户名格式输入正确';
            } else {
                console.log('错误的');
                span.className = 'wrong';
                span.innerHTML = '用户名格式输入不正确';
            }
        }
    </script>
</body>

</html>

_Tough_Girl

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
正则表达式案例：用户名验证

案例：用户名验证功能需求：如果用户名输入合法，则后面提示信息为：用户名合法，并且颜色为绿色。如果用户名输入不合法，则后面提示信息为：用户名不符合规范，并且颜色为红色。分析:用户名只能为英文字母，数字，下划线或者短横线组成,，并且用户名长度为 6~16位。首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/当表单失去焦点就开始验证。如果符合正则规范,，则让后面的 span 标签添加 right 类。如果不符合正则规范，则让后面的 span 标签添加 w
复制链接

扫一扫

专栏目录