效果

代碼

html：

<input type="text" class="uname"><span>請(qǐng)輸入用戶名</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');// 正則表達(dá)式，可以輸入6到16位的 a-z A-Z 0-9 或下劃線_和分隔符 - var reg = /^[a-zA-Z0-9_-]{6,16}$/; //如果用戶名輸完了（失焦），則讓它加一個(gè)right類，顏色變綠//修改span里的文字uname.addEventListener('blur', function () {if (reg.test(this.value)) {span.className = 'right';span.innerHTML = '用戶名符合規(guī)范';}else {span.className = 'wrong';span.innerHTML = '用戶名不符合規(guī)范';}}) //按下回車(chē)鍵相當(dāng)于失焦uname.addEventListener('keyup',function(){if(event.keyCode === 13) {this.blur();}})

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。