JS 实现前端验证：用户名、邮箱、密码全搞定，验证成功跳转页面！

以下是用 JavaScript 实现前端验证的代码： ```javascript // 获取用户名输入框 var usernameInput = document.getElementById("username"); // 获取邮箱输入框 var emailInput = document.getElementById("email"); // 获取密码输入框 var passwordInput = document.getElementById("password"); // 获取确认密码输入框 var confirmPasswordInput = document.getElementById("confirmPassword"); // 用户名验证函数 function validateUsername() { if (usernameInput.value.length < 6) { alert("用户名至少要 6 位"); return false; } return true; } // 邮箱验证函数 function validateEmail() { // 这里是一个简单的邮箱正则表达式 var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(emailInput.value)) { alert("请输入有效的邮箱"); return false; } return true; } // 密码验证函数 function validatePassword() { if (passwordInput.value.length < 8) { alert("密码至少 8 位"); return false; } return true; } // 确认密码验证函数 function validateConfirmPassword() { if (passwordInput.value!== confirmPasswordInput.value) { alert("两次密码不一致"); return false; } return true; } // 提交表单时的验证函数 function validateForm() { if (validateUsername() && validateEmail() && validatePassword() && validateConfirmPassword()) { // 验证成功，跳转页面 window.location.href = "success.html"; } } ``` 额外需要注意的逻辑点： 1. 正则表达式的邮箱验证可能不够完善，实际应用中可能需要更复杂准确的表达式。 2. 对于输入框的获取，要确保在页面加载完成后执行相关操作，避免获取不到元素。 3. 验证失败的提示信息可以更加详细和友好，以提升用户体验。 ######[AI写代码神器 | 464点数解答 | 2024-11-23 14:08:29]