前端 JS 实战：用户名、邮箱、密码全面验证及优化思路

以下是用 JavaScript 实现前端验证的代码： ```javascript // 获取用户名输入框元素 let usernameInput = document.getElementById('username'); // 获取邮箱输入框元素 let emailInput = document.getElementById('email'); // 获取密码输入框元素 let passwordInput = document.getElementById('password'); // 获取确认密码输入框元素 let confirmPasswordInput = document.getElementById('confirmPassword'); // 用户名验证函数 function validateUsername() { let username = usernameInput.value; if (username.length < 6) { alert('用户名至少包含 6 位！'); return false; } return true; } // 邮箱验证函数 function validateEmail() { let email = emailInput.value; let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert('请输入有效的邮箱！'); return false; } return true; } // 密码验证函数 function validatePassword() { let password = passwordInput.value; if (password.length < 8) { alert('密码至少 8 个字符！'); return false; } return true; } // 密码和确认密码一致性验证函数 function validateConfirmPassword() { let password = passwordInput.value; let confirmPassword = confirmPasswordInput.value; if (password!== confirmPassword) { alert('两次密码不一致！'); return false; } return true; } // 表单提交时的验证函数 function validateForm() { if (!validateUsername() ||!validateEmail() ||!validatePassword() ||!validateConfirmPassword()) { return false; } return true; } ``` 额外需要注意的逻辑点： 1. 对于用户名，除了长度，还可以考虑限制特殊字符。 2. 邮箱的正则表达式可能需要根据更具体的需求进行优化。 3. 密码可以增加复杂度的要求，比如包含数字、字母和特殊字符。 ######[AI写代码神器 | 480点数解答 | 2024-11-23 14:28:25]