效果

代碼

html：

<input type="text" class="uname"><span>請輸入用戶名</span><div class="hint"></div>

css：

label {color: #ccc;}.right {color: green;}.wrong {color: red;}

javascript

var uname = document.querySelector('.uname');var span = document.querySelector('span');// 正則表達式，可以輸入6到16位的 a-z A-Z 0-9 或下劃線_和分隔符 - var reg = /^[a-zA-Z0-9_-]{6,16}$/; //如果用戶名輸完了（失焦），則讓它加一個right類，顏色變綠//修改span里的文字uname.addEventListener('blur', function () {if (reg.test(this.value)) {span.className = 'right';span.innerHTML = '用戶名符合規范';}else {span.className = 'wrong';span.innerHTML = '用戶名不符合規范';}}) //按下回車鍵相當于失焦uname.addEventListener('keyup',function(){if(event.keyCode === 13) {this.blur();}})

總結

以上是生活随笔為你收集整理的JavaScript - 用户名表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。