用户名验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .right{ color: green; } .false{ color: red; } </style> </head> <body> <input type="text" class="uname"> <span>请输入用户名</span> <script> var reg = /^[a-zA-Z0-9_-]{6,16}$/; var uname = document.querySelector('.uname'); var span = document.querySelector('span'); uname.addEventListener('blur',function(){ if(reg.test(this.value)){ console.log('正确的'); span.className = 'right'; span.innerHTML = '您输入正确'; }else { console.log('错误的'); span.className = 'false' span.innerHTML = '您输入错误'; } }) </script> </body> </html>