以下是利用
HTML，
CSS，JavaScript
编写的用户注册代码示例：
HTML 代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>用户注册</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/
css" href="style.
css">
</head>
<body>
<div class="container">
<h1>用户注册</h1>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<span class="error-message" id="username-error"></span>
<br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<span class="error-message" id="password-error"></span>
<br><br>
<label for="confirm-password">确认密码：</label>
<input type="password" id="confirm-password" name="confirm-password">
<span class="error-message" id="confirm-password-error"></span>
<br><br>
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email">
<span class="error-message" id="email-error"></span>
<br><br>
<input type="submit" value="注册" id="register-button">
</form>
</div>
<script src="script.js"></script>
</body>
</
html>
```
在上面的
HTML 代码中，我们创建了一个包含用户注册表单的容器。表单包括用户名、密码、确认密码和电子邮件等信息。每个表单项下面都有一个错误提示信息的 span 元素，用于在用户填写表单时显示错误信息。最后，我们还添加了一个注册按钮，用于提交表单。
CSS 代码：
```
css
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
font-weight: bold;
}
input[type="text"],
input[type="password"],
input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
outline: none;
}
.error-message {
color: red;
font-size: 0.8em;
margin-bottom: 10px;
display: none;
}
input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #555;
}
```
在上面的
CSS 代码中，我们对用户注册表单进行了样式设计，包括容器样式、表单样式、输入框样式、错误提示信息样式和注册按钮样式等。
JavaScript 代码：
```javascript
const form = document.querySelector('form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
const emailInput = document.getElementById('email');
const usernameError = document.getElementById('username-error');
const passwordError = document.getElementById('password-error');
const confirmPasswordError = document.getElementById('confirm-password-error');
const emailError = document.getElementById('email-error');
const registerButton = document.getElementById('register-button');
const validateUsername = () => {
if (usernameInput.value.trim().length === 0) {
usernameError.textContent = '用户名不能为空';
return false;
} else if (usernameInput.value.trim().length < 6) {
usernameError.textContent = '用户名长度不能少于6个字符';
return false;
} else {
usernameError.textContent = '';
return true;
}
}
const validatePassword = () => {
if (passwordInput.value.trim().length === 0) {
passwordError.textContent = '密码不能为空';
return false;
} else if (passwordInput.value.trim().length < 6) {
passwordError.textContent = '密码长度不能少于6个字符';
return false;
} else {
passwordError.textContent = '';
return true;
}
}
const validateConfirmPassword = () => {
if (confirmPasswordInput.value.trim().length === 0) {
confirmPasswordError.textContent = '确认密码不能为空';
return false;
} else if (confirmPasswordInput.value.trim() !== passwordInput.value.trim()) {
confirmPasswordError.textContent = '两次输入的密码不一致';
return false;
} else {
confirmPasswordError.textContent = '';
return true;
}
}
const validateEmail = () => {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailInput.value.trim().length === 0) {
emailError.textContent = '电子邮件不能为空';
return false;
} else if (!emailPattern.test(emailInput.value.trim())) {
emailError.textContent = '电子邮件格式不正确';
return false;
} else {
emailError.textContent = '';
return true;
}
}
const validateForm = () => {
const isUsernameValid = validateUsername();
const isPasswordValid = validatePassword();
const isConfirmPasswordValid = validateConfirmPassword();
const isEmailValid = validateEmail();
return isUsernameValid && isPasswordValid && isConfirmPasswordValid && isEmailValid;
}
form.addEventListener('submit', (event) => {
event.preventDefault();
if (validateForm()) {
alert('注册成功！');
}
});
usernameInput.addEventListener('blur', validateUsername);
passwordInput.addEventListener('blur', validatePassword);
confirmPasswordInput.addEventListener('blur', validateConfirmPassword);
emailInput.addEventListener('blur', validateEmail);
```
在上面的 JavaScript 代码中，我们首先获取表单元素和错误提示信息元素，并
编写了表单项的验证函数，包括验证用户名、密码、确认密码和电子邮件等。接着，我们
编写了 validateForm 函数，用于验证整个表单的
有效性。最后，我们使用事件监听器来监听表单提交事件和表单项的失去焦点事件，以触发表单项的验证函数。
当用户在动漫导航网页上提交注册表单时，将会调用 JavaScript 代码进行表单验证操作。如果表单验证通过，将会弹出一个注册成功的提示框。
1969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
