用户名验证（正则表达式）-CFANZ编程社区

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

功能需求：

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

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

正则表达式：/^[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 条评论