JavaScript 实现用户名、邮箱、密码前端验证示例：含长度与一致性校验

以下是使用 JavaScript 实现上述前端验证的示例代码： ```html <!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>前端验证示例</title> </head> <body> <form action=""> <label for="username">用户名：</label><br> <input type="text" id="username"><br> <label for="email">邮箱：</label><br> <input type="text" id="email"><br> <label for="password">密码：</label><br> <input type="password" id="password"><br> <label for="confirmPassword">确认密码：</label><br> <input type="password" id="confirmPassword"><br> <button type="button" onclick="validateForm()">提交</button> </form> <script> function validateForm() { let username = document.getElementById('username').value; let email = document.getElementById('email').value; let password = document.getElementById('password').value; let confirmPassword = document.getElementById('confirmPassword').value; // 用户名长度验证 if (username.length < 6) { alert('用户名至少包含 6 位字符'); return false; } // 邮箱验证 let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert('请输入有效的邮箱地址'); return false; } // 密码长度验证 if (password.length < 8) { alert('密码至少 8 个字符'); return false; } // 密码和确认密码一致性验证 if (password!== confirmPassword) { alert('两次密码不一致'); return false; } alert('验证通过'); } </script> </body> </html> ``` 在上述代码中，`validateForm` 函数实现了对用户名、邮箱、密码和确认密码的验证逻辑。如果验证不通过，会弹出相应的提示信息并返回 `false` 阻止表单提交。如果所有验证都通过，会弹出验证通过的提示信息。 ######[AI写代码神器 | 566点数解答 | 2024-10-30 11:01:52]

服务商

更多选项

快捷项

自定义