JavaScript - 用户名表单验证

效果

代码

html：

1.  
   <input type="text" class="uname">
2.  
   <span>请输入用户名</span>
3.  
   <div class="hint"></div>

css：

1.  
   label {
2.  
   color: #ccc;
3.  
   }
4.  
    
5.  
   .right {
6.  
   color: green;
7.  
   }
8.  
    
9.  
   .wrong {
10.  
    color: red;
11.  
    }

javascript

1.  
   var uname = document.querySelector('.uname');
2.  
   var span = document.querySelector('span');
3.  
   // 正则表达式，可以输入6到16位的 a-z A-Z 0-9 或下划线_和分隔符 -
4.  
   var reg = /^[a-zA-Z0-9_-]{6,16}$/;
5.  
    
6.  
   //如果用户名输完了（失焦），则让它加一个right类，颜色变绿
7.  
   //修改span里的文字
8.  
   uname.addEventListener('blur', function () {
9.  
   if (reg.test(this.value)) {
10.  
    span.className = 'right';
11.  
    span.innerHTML = '用户名符合规范';
12.  
    }
13.  
    else {
14.  
    span.className = 'wrong';
15.  
    span.innerHTML = '用户名不符合规范';
16.  
    }
17.  
    })
18.  
     
19.  
    //按下回车键相当于失焦
20.  
    uname.addEventListener('keyup',function(){
21.  
    if(event.keyCode === 13) {
22.  
    this.blur();
23.  
    }
24.  
    })

这篇好文章是转载于：学新通技术网