好的，以下是
一个简单的 HTML5 注册
网页，包含
JavaScript 和 CSS
代码，可以完成各方面的合法
验证性：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册
网页</title>
<style>
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"], input[type="email"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
margin-bottom: 20px;
}
.error {
color: red;
font-size: 12px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>注册</h1>
<form id="registration-form">
<label>
用户名:
<input type="text" name="username" required>
<div class="error" id="username-error"></div>
</label>
<label>
密码:
<input type="password" name="password" required>
<div class="error" id="password-error"></div>
</label>
<label>
确认
密码:
<input type="password" name="password-confirm" required>
<div class="error" id="password-confirm-error"></div>
</label>
<label>
邮箱:
<input type="email" name="email" required>
<div class="error" id="email-error"></div>
</label>
<input type="submit" value="注册">
</form>
<script>
// 获取表单元素和错误
信息元素
const form = document.getElementById('registration-form');
const usernameInput = form.elements['username'];
const passwordInput = form.elements['password'];
const passwordConfirmInput = form.elements['password-confirm'];
const emailInput = form.elements['email'];
const usernameError = document.getElementById('username-error');
const passwordError = document.getElementById('password-error');
const passwordConfirmError = document.getElementById('password-confirm-error');
const emailError = document.getElementById('email-error');
//
验证用户名
usernameInput.addEventListener('input', function() {
if (usernameInput.value.length < 6) {
usernameError.innerText = '
用户名长度不能小于 6 个字符';
} else {
usernameError.innerText = '';
}
});
//
验证密码
passwordInput.addEventListener('input', function() {
if (passwordInput.value.length < 6) {
passwordError.innerText = '
密码长度不能小于 6 个字符';
} else {
passwordError.innerText = '';
}
});
//
验证确认
密码
passwordConfirmInput.addEventListener('input', function() {
if (passwordConfirmInput.value !== passwordInput.value) {
passwordConfirmError.innerText = '两次
密码输入不一致';
} else {
passwordConfirmError.innerText = '';
}
});
//
验证邮箱
emailInput.addEventListener('input', function() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
emailError.innerText = '邮箱格式不
正确';
} else {
emailError.innerText = '';
}
});
// 提交表单时
验证所有字段
form.addEventListener('submit', function(event) {
if (usernameInput.value.length < 6) {
usernameError.innerText = '
用户名长度不能小于 6 个字符';
event.preventDefault();
}
if (passwordInput.value.length < 6) {
passwordError.innerText = '
密码长度不能小于 6 个字符';
event.preventDefault();
}
if (passwordConfirmInput.value !== passwordInput.value) {
passwordConfirmError.innerText = '两次
密码输入不一致';
event.preventDefault();
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
emailError.innerText = '邮箱格式不
正确';
event.preventDefault();
}
});
</script>
</body>
</html>
```
这个注册
网页包含了
用户名、
密码、确认
密码和邮箱四个字段，分别进行了合法
验证。其中：
-
用户名长度不能小于 6 个字符；
-
密码长度不能小于 6 个字符；
- 确认
密码必须与
密码一致；
- 邮箱必须符合邮箱格式。
当
用户输入不合法时，会在相应的错误
信息下方显示红色的错误提示。当
用户提交表单时，会再次
验证所有字段，如果有任何
一个字段不合法，会阻止表单的提交，同时显示相应的错误提示。
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
