用户名验证（正则表达式）

最新推荐文章于 2024-04-27 17:34:02 发布

雾喔

最新推荐文章于 2024-04-27 17:34:02 发布

阅读量710

点赞数

分类专栏：前端文章标签：正则表达式数学建模

本文链接：https://blog.csdn.net/Hubery_sky/article/details/131026617

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

功能需求：

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

正则表达式：/^[a-zA-Z0-9_-]{6,16}$/

onblur事件：

onblur 事件发生在对象失去焦点时。
onblur 事件最常与表单验证代码一起使用（例如，当用户离开表单字段时）。
代码：

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

雾喔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
用户名验证（正则表达式）

如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色。onblur 事件最常与表单验证代码一起使用（例如，当用户离开表单字段时）。如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色。onblur 事件发生在对象失去焦点时。
复制链接

扫一扫