<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .title{ width: 800px; height: 80px; margin: 100px auto; display: flex; justify-content: space-around; align-items: center; } .btn1{ width: 280px; height: 50px; font-size: 30px; line-height: 50px; } .note{ width: 280px; height: 50px; font-size: 10px; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div class="title"> <input type="text" class="btn1" placeholder="请设置用户名"> <input type="button" value="确定" class="btn2"> <div class="note"> <p>设置后不可更改</p> <p>中英文均可,最长14个英文或7个中文</p> </div> </div> <script> window.onload=function () { var btn1=document.getElementsByClassName("btn1")[0]; var btn2=document.getElementsByClassName("btn2")[0]; var note=document.getElementsByClassName("note")[0]; var number=/^[0-9]*$/; var name=/\w*[\u4e00-\u9fa5]*/ btn2.onclick=function () { a=btn1.value if(number.test(a)){ note.innerText="用户名不能为纯数字" } else if(name.test(a)){ var b=0; for(var i=0;i<a.length;i++){ if (a.charCodeAt(i)>127 || a.charCodeAt(i)==94) { b+= 2; } else { b++; } if(b>14||b<=0){ note.innerText="用户名不能超过7个汉字或者14个字符" } else{ note.innerText="此用户名可用" } } } else { note.innerText="用户名仅支持中英文、数字和下划线,且不能为纯数字" } } } </script> </body> </html>
检查用户名
最新推荐文章于 2023-01-08 16:20:04 发布