HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面信息验证</title>
<style>
.error {
color: red;
margin-left: 5px;
}
</style>
</head>
<body>
<form id="registrationForm">
用户名: <input type="text" id="username" name="username"><br><br>
密码: <input type="password" id="password" name="password"><br><br>
确认密码: <input type="password" id="confirm_password" name="confirm_password"><br><br>
邮箱: <input type="email" id="email" name="email"><br><br>
<input type="submit" value="注册">
</form>
<script>
document.getElementById('registrationForm').onsubmit = function(e) {
e.preventDefault();
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var confirm_password = document.getElementById('confirm_password').value;
var email = document.getElementById('email').value;
// 验证用户名
if (username.length < 6) {
showError('用户名长度必须大于6个字符。');
return;
}
// 验证密码
if (password !== confirm_password) {
showError('密码和确认密码不匹配。');
return;
}
// 验证邮箱
if (!email.includes('@')) {
showError('请输入有效的邮箱地址。');
return;
}
// 验证通过，提交表单
this.submit();
};
function showError(errorMessage) {
alert(errorMessage);
}
</script>
</body>
</html>这段代码实现了一个简单的注册页面，并在用户尝试提交表单时进行验证。如果任何验证规则失败，它将显示一个错误消息，并取消表单的提交。如果所有验证都通过，它将提交表单。这个例子教会了如何使用JavaScript进行简单的表单验证，并展示了如何通过alert函数显示错误消息。
评论已关闭