<!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>Document</title> </head> <style> *{ margin: 0; padding: 0; } .container{ position: relative; top: 100px; left: 50%; transform: translateX(-50%); background-color: #00CCFF; width: 500px; height: 350px; } .zhuce{ display: block; height: 60px; background-color: #0099CC; color: white; text-align: center; font-weight: bold; font-size: 24px; line-height: 30px; } input{ margin-left: 90px; display: block; height: 40px; width: 300px; } .c1{ margin-top: 40px; } .container div{ margin: 0px 100px; height: 35px; color: red; font-size: 12px; line-height: 35px; } button { margin-left: 90px; width: 300px; height: 35px; color: #fff; background-color: #0099CC; border: 1px solid grey; cursor: pointer; } </style> <body> <div class="container"> <span class="zhuce">注册</span> <input type="username" class="c1" id="username" placeholder="请输入您的用户名"> <div class="userNotice"></div> <input type="password" id="password" placeholder="请输入您的密码"> <div class="passwordNotice"></div> <button id='subBtn'>提交</button> </div> </body> <script> let username=document.getElementById('username') let password=document.getElementById('password') let userNotice=document.getElementsByClassName('userNotice')[0] let passwordNotice=document.getElementsByClassName('passwordNotice')[0] let sub=document.getElementById('subBtn') sub.addEventListener('click',()=>{ let uValue = username.value let keycode = uValue.charCodeAt(0) userNotice.innerHTML = '' if (uValue.length<6 || uValue.length>18) { userNotice.innerHTML = '用户名长度必须为6到18位!' } else if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) { userNotice.innerHTML = '用户名必须以英文字母开头!' } passwordNotice.innerHTML = '' if (password.value.length < 6) { passwordNotice.innerHTML = '密码不能少于六位!' } }) </script> </html>