<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课堂案例-验证用户名案例</title> <style> span { display: inline-block; width: 250px; height: 30px; vertical-align: middle; line-height: 30px; padding-left: 15px; } .error { color: red; background: url(image/error1.png) no-repeat left center; } .right { color: green; background: url(image/right1.png) no-repeat left center; } </style> </head> <body> </body> <input type="text"> <span></span> <script> let input=document.querySelector('input'); let span=input.nextElementSibling; input.addEventListener('blur',function(){ if(/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)){ span.className='right'; span.innerHTML='输入正确'; }else{ span.className='error'; span.innerHTML='输入错误'; } }) </script> </html>
用户名验证
于 2022-05-20 09:22:12 首次发布