- 综合使用HTML、JavaScript和CSS进行注册页面设计，实现以下若干功能：
-
- 注意整个页面的色调和美观
- 使用Frameset+Table布局（div也可）
- 对用户ID和用户名、口令不符合条件及时判断
- 对口令不一致进行及时判断（34的及时判断，要求提示信息必须显示在同一个页面，也就是说显示在当前的行的后面或者上面或者下面）
- 判断Email地址是否合法
- 在“提交”后能在新页面显示所有的输入信息
效果展示
以下是代码实现
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>注册页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 50%;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #4caf50;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.error {
color: red;
font-size: 0.9em;
}
button {
background-color: #4caf50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="reset"] {
background-color: #f44336;
}
.radio-group {
display: flex;
gap: 10px;
}
.radio-group label {
display: flex;
align-items: center;
}
.radio-group input[type="radio"] {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>注册页面</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<div class="form-group">
<label for="userId">用户ID (6-8位):</label>
<input type="text" id="userId" name="userId" required />
<span class="error" id="userIdError"></span>
</div>
<div class="form-group">
<label for="username">用户名 (2-10位):</label>
<input type="text" id="username" name="username" required />
<span class="error" id="usernameError"></span>
</div>
<div class="form-group">
<label for="password">口令 (6-8位，不能与用户ID相同):</label>
<input type="password" id="password" name="password" required />
<span class="error" id="passwordError"></span>
</div>
<div class="form-group">
<label for="confirmPassword">确认口令:</label>
<input
type="password"
id="confirmPassword"
name="confirmPassword"
required
/>
<span class="error" id="confirmPasswordError"></span>
</div>
<div class="form-group">
<label for="birthday">生日 (格式: yyyy-mm-dd):</label>
<input
type="text"
id="birthday"
name="birthday"
placeholder="yyyy-mm-dd"
required
/>
<span class="error" id="birthdayError"></span>
</div>
<div class="form-group">
<label>学历:</label>
<div class="radio-group">
<label
><input
type="radio"
name="education"
value="专科"
required
/>专科</label
>
<label
><input type="radio" name="education" value="本科" />本科</label
>
<label
><input
type="radio"
name="education"
value="硕士研究生"
/>硕士研究生</label
>
<label
><input
type="radio"
name="education"
value="博士研究生"
/>博士研究生</label
>
<label
><input type="radio" name="education" value="其他" />其他</label
>
</div>
</div>
<div class="form-group">
<label for="region">地区:</label>
<select id="region" name="region">
<option value="华南">华南</option>
<option value="华东">华东</option>
<option value="华北">华北</option>
<option value="西南">西南</option>
<option value="西北">西北</option>
</select>
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required />
<span class="error" id="emailError"></span>
</div>
<div class="form-group">
<label for="address">地址:</label>
<input type="text" id="address" name="address" required />
</div>
<div class="form-group">
<label for="phone">电话 (数字和连字符，例如123456-123):</label>
<input type="tel" id="phone" name="phone" required />
<span class="error" id="phoneError"></span>
</div>
<div class="form-group">
<label for="remarks">备注:</label>
<textarea id="remarks" name="remarks" rows="4"></textarea>
</div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</div>
<script>
function validateForm() {
let valid = true;
// 清除之前的错误信息
document
.querySelectorAll(".error")
.forEach((el) => (el.textContent = ""));
// 用户ID验证
const userId = document.getElementById("userId").value;
if (userId.length < 6 || userId.length > 8) {
document.getElementById("userIdError").textContent =
"用户ID必须为6-8位";
valid = false;
}
// 用户名验证
const username = document.getElementById("username").value;
if (username.length < 2 || username.length > 10) {
document.getElementById("usernameError").textContent =
"用户名必须为2-10位";
valid = false;
}
// 口令验证
const password = document.getElementById("password").value;
if (password.length < 6 || password.length > 8 || password === userId) {
document.getElementById("passwordError").textContent =
"口令必须为6-8位，且不能与用户ID相同";
valid = false;
}
// 确认口令验证
const confirmPassword =
document.getElementById("confirmPassword").value;
if (confirmPassword !== password) {
document.getElementById("confirmPasswordError").textContent =
"口令不一致";
valid = false;
}
// 生日格式验证
const birthday = document.getElementById("birthday").value;
const birthdayPattern = /^\d{4}-\d{2}-\d{2}$/;
if (!birthdayPattern.test(birthday)) {
document.getElementById("birthdayError").textContent =
"生日格式不正确，必须为yyyy-mm-dd";
valid = false;
}
// Email验证
const email = document.getElementById("email").value;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
document.getElementById("emailError").textContent =
"请输入有效的Email地址";
valid = false;
}
// 电话验证
const phone = document.getElementById("phone").value;
const phonePattern = /^\d{6}-\d{3}$/;
if (!phonePattern.test(phone)) {
document.getElementById("phoneError").textContent = "电话格式不正确";
valid = false;
}
// 如果所有验证通过，显示输入信息
if (valid) {
const formData = `
<h2>注册信息</h2>
<p>用户ID: ${userId}</p>
<p>用户名: ${username}</p>
<p>口令: ${password}</p>
<p>生日: ${birthday}</p>
<p>学历: ${
document.querySelector('input[name="education"]:checked')
.value
}</p>
<p>地区: ${document.getElementById("region").value}</p>
<p>E-mail: ${email}</p>
<p>地址: ${document.getElementById("address").value}</p>
<p>电话: ${phone}</p>
<p>备注: ${document.getElementById("remarks").value}</p>
`;
const newWindow = window.open("", "_blank");
newWindow.document.write(`
<html>
<head>
<title>注册信息</title>
<style>
body { font-family: Arial, sans-serif; }
h2 { color: #4CAF50; }
</style>
</head>
<body>
${formData}
</body>
</html>
`);
newWindow.document.close(); // 关闭文档流
}
return false; // 防止表单提交
}
</script>
</body>
</html>
![[CSP-J 2023] 一元二次方程（模拟）](https://csdnimg.cn/release/blog_editor_html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83A){kind=icon}
