手把手教你：用 HTML 和 JS 打造含严格验证的注册界面

以下是一个使用 HTML 和 JavaScript 实现的简单注册界面示例，包含了您要求的验证逻辑： ```html <!DOCTYPE html> <html> <head> <title>注册界面</title> </head> <body> <h2>注册</h2> <form id="registrationForm"> <label for="username">用户名：</label><br> <input type="text" id="username" required><br> <label for="password">密码：</label><br> <input type="password" id="password" minlength="8" required><br> <label for="confirmPassword">重复密码：</label><br> <input type="password" id="confirmPassword" required><br> <label for="phoneNumber">手机号：</label><br> <input type="tel" id="phoneNumber" pattern="^1[35789][0-35-9]\d{8}$" required><br> <input type="submit" value="注册"> </form> <div id="errorMessages"></div> <script> document.getElementById("registrationForm").addEventListener("submit", function (event) { event.preventDefault(); var username = document.getElementById("username").value; var password = document.getElementById("password").value; var confirmPassword = document.getElementById("confirmPassword").value; var phoneNumber = document.getElementById("phoneNumber").value; var errorMessages = []; if (username === "") { errorMessages.push("用户名不能为空"); } if (password.length < 8) { errorMessages.push("密码长度必须 8 位以上"); } if (password!== confirmPassword) { errorMessages.push("密码和重复密码不一致"); } if (!phoneNumber.match(/^1[35789][0-35-9]\d{8}$/)) { errorMessages.push("手机号格式不正确"); } if (errorMessages.length > 0) { var errorMessageDiv = document.getElementById("errorMessages"); errorMessageDiv.innerHTML = errorMessages.join("<br>"); } else { // 在此处添加注册成功的处理逻辑 alert("注册成功！"); } }); </script> </body> </html> ``` 在上述代码中，我们使用了 HTML 的输入字段和表单提交事件，结合 JavaScript 进行输入值的验证，并将错误消息集中显示在一个 `div` 中。如果所有验证都通过，会弹出"注册成功"的提示。 ######[AI写代码神器 | 606点数解答 | 2024-10-17 09:21:12]

服务商

更多选项

快捷项

自定义