html+css+js验证注册的代码
时间: 2023-08-11 16:23:50 浏览: 47
以下是一个简单的HTML+CSS+JS验证注册的示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h1>注册页面</h1>
<form id="registerForm" onsubmit="return validateForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<span id="usernameError" class="error"></span><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<span id="passwordError" class="error"></span><br>
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br>
<span id="confirmPasswordError" class="error"></span><br>
<input type="submit" value="注册">
</form>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
var usernameError = document.getElementById("usernameError");
var passwordError = document.getElementById("passwordError");
var confirmPasswordError = document.getElementById("confirmPasswordError");
var isValid = true;
// 验证用户名
if (username === "") {
usernameError.innerHTML = "用户名不能为空";
isValid = false;
} else if (username.length < 4) {
usernameError.innerHTML = "用户名长度不能小于4";
isValid = false;
} else {
usernameError.innerHTML = "";
}
// 验证密码
if (password === "") {
passwordError.innerHTML = "密码不能为空";
isValid = false;
} else if (password.length < 6) {
passwordError.innerHTML = "密码长度不能小于6";
isValid = false;
} else {
passwordError.innerHTML = "";
}
// 验证确认密码
if (confirmPassword === "") {
confirmPasswordError.innerHTML = "确认密码不能为空";
isValid = false;
} else if (password !== confirmPassword) {
confirmPasswordError.innerHTML = "两次密码不一致";
isValid = false;
} else {
confirmPasswordError.innerHTML = "";
}
return isValid;
}
</script>
</body>
</html>
```
这段代码包含了一个表单,包括用户名、密码和确认密码三个输入框,以及一个提交按钮。当用户点击提交按钮时,会触发 `validateForm` 函数进行表单验证。该函数首先获取用户名、密码和确认密码的值,然后依次进行验证。如果有任何一个验证失败,会将 `isValid` 设为 `false`,并将错误信息显示在相应的 `<span>` 标签中。最后,根据 `isValid` 的值返回表单是否合法。