1. 设计用户注册页面
首先，我们需要设计一个用户注册表单。表单元素应该包括用户的姓名、邮箱、密码和确认密码等。用户点击提交按钮时，页面应当提交表单，但我们将通过 JavaScript 校验输入的合法性。
2. 实现用户输入信息的校验
为了保证用户输入的信息合法，我们将利用 JavaScript 来校验每一个输入项。具体来说，我们需要对用户的姓名、邮箱和密码等进行验证。在用户鼠标离开输入框时，显示输入是否合法的提示信息。
代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title><style>/* 样式定义 */body {font-family: Arial, sans-serif;margin: 50px;}.form-container {width: 300px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 10px;}.form-item {margin: 15px 0;}.form-item label {display: block;margin-bottom: 5px;}.form-item input {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 5px;}.form-item .error {color: red;font-size: 12px;}.form-item .valid {color: green;font-size: 12px;}.form-item .submit-btn {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;border-radius: 5px;cursor: pointer;}</style>
</head>
<body><div class="form-container"><h2>用户注册</h2><form id="registrationForm" onsubmit="return validateForm()"><!-- 姓名输入框 --><div class="form-item"><label for="name">姓名</label><input type="text" id="name" name="name" placeholder="请输入姓名" onblur="checkName()" required><div id="nameError" class="error"></div></div><!-- 邮箱输入框 --><div class="form-item"><label for="email">邮箱</label><input type="email" id="email" name="email" placeholder="请输入邮箱" onblur="checkEmail()" required><div id="emailError" class="error"></div></div><!-- 密码输入框 --><div class="form-item"><label for="password">密码</label><input type="password" id="password" name="password" placeholder="请输入密码" onblur="checkPassword()" required><div id="passwordError" class="error"></div></div><!-- 确认密码输入框 --><div class="form-item"><label for="confirmPassword">确认密码</label><input type="password" id="confirmPassword" name="confirmPassword" placeholder="请确认密码" onblur="checkConfirmPassword()" required><div id="confirmPasswordError" class="error"></div></div><!-- 提交按钮 --><div class="form-item"><button type="submit" class="submit-btn">注册</button></div></form></div><script>// 姓名校验函数function checkName() {var name = document.getElementById('name').value;var nameError = document.getElementById('nameError');var nameRegex = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/; // 校验姓名为2到20个字母或汉字if (!nameRegex.test(name)) {nameError.textContent = "姓名不合法，需为2-20个字母或汉字";nameError.classList.add("valid");nameError.classList.remove("error");} else {nameError.textContent = "姓名合法";nameError.classList.add("valid");nameError.classList.remove("error");}}// 邮箱校验函数function checkEmail() {var email = document.getElementById('email').value;var emailError = document.getElementById('emailError');var emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; // 校验邮箱格式if (!emailRegex.test(email)) {emailError.textContent = "请输入有效的邮箱地址";emailError.classList.add("valid");emailError.classList.remove("error");} else {emailError.textContent = "邮箱合法";emailError.classList.add("valid");emailError.classList.remove("error");}}// 密码校验函数function checkPassword() {var password = document.getElementById('password').value;var passwordError = document.getElementById('passwordError');var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{6,16}$/; // 密码要求：6-16个字符，至少包含一个大写字母、一个小写字母和一个数字if (!passwordRegex.test(password)) {passwordError.textContent = "密码应为6-16个字符，且包含大小写字母和数字";passwordError.classList.add("valid");passwordError.classList.remove("error");} else {passwordError.textContent = "密码合法";passwordError.classList.add("valid");passwordError.classList.remove("error");}}// 确认密码校验函数function checkConfirmPassword() {var password = document.getElementById('password').value;var confirmPassword = document.getElementById('confirmPassword').value;var confirmPasswordError = document.getElementById('confirmPasswordError');if (password !== confirmPassword) {confirmPasswordError.textContent = "两次输入的密码不一致";confirmPasswordError.classList.add("valid");confirmPasswordError.classList.remove("error");} else {confirmPasswordError.textContent = "密码一致";confirmPasswordError.classList.add("valid");confirmPasswordError.classList.remove("error");}}// 表单提交时校验所有字段function validateForm() {checkName();checkEmail();checkPassword();checkConfirmPassword();// 如果有任何字段不合法，返回false，阻止表单提交if (document.querySelectorAll('.error').length > 0) {return false;}return true; // 校验通过，表单提交}</script></body>
</html>
代码解释
-
HTML结构：
- 表单包含四个输入框，分别用于用户输入姓名、邮箱、密码和确认密码。
- 每个输入框旁边都设置了一个
<div>元素来显示校验信息，初始时为空。
-
CSS样式：
- 为表单和输入框设置了基础样式，确保页面看起来整洁。
- 当校验成功时，文字变为绿色；失败时，变为红色。
-
JavaScript函数：
checkName(): 校验姓名是否合法（只允许包含2到20个字母或汉字）。checkEmail(): 校验邮箱格式。checkPassword(): 校验密码格式（6到16个字符，至少包含一个大写字母、一个小写字母和一个数字）。checkConfirmPassword(): 校验确认密码是否与密码一致。validateForm(): 在表单提交时，校验所有输入框的内容是否合法，如果有任何问题，返回false，防止表单提交。
3. 总结
这个注册页面的功能包括了基本的用户输入校验。当用户离开输入框时，系统会根据用户输入的内容显示相应的提示信息。点击“注册”按钮时，系统会进行全面的校验，确保表单中的每个字段都符合要求。如果有任何问题，表单将不会提交。