编写用户注册静态页面register.html,包含CSS页面布局和JavaScript数据校验,把代码写出来
时间: 2024-10-19 13:07:25 浏览: 10
为了创建一个简单的用户注册静态页面(register.html),我们将会使用HTML、CSS以及基本的JavaScript来完成这个任务。首先,我们需要设置页面的基本结构,然后添加CSS样式以组织内容,并编写JavaScript来进行数据验证。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- 引入CSS文件 -->
</head>
<body>
<div class="container">
<h2>用户注册</h2>
<form id="registrationForm">
<label for="username">用户名:</label>
<input type="text" id="username" required>
<label for="email">邮箱:</label>
<input type="email" id="email" required>
<label for="password">密码:</label>
<input type="password" id="password" pattern=".{6,}" required>
<button type="submit">注册</button>
</form>
<p id="error-message"></p>
</div>
<script src="scripts.js"> <!-- 引入JavaScript文件 -->
</script>
</body>
</html>
```
接下来是对应的CSS(styles.css)部分,用于美化布局:
```css
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
}
```
最后是JavaScript(scripts.js)部分,用于处理表单提交并进行简单的数据验证:
```javascript
document.getElementById('registrationForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
if (!username.value || !email.value || !password.value) {
document.getElementById('error-message').innerText = '所有字段都是必填的';
} else if (!/^[a-zA-Z0-9_]{3,}$/.test(username.value)) {
document.getElementById('error-message').innerText = '用户名长度应在3到20字符之间';
} else if (!/^[\w.-]+@[\w-]+\.\w+$/.test(email.value)) {
document.getElementById('error-message').innerText = '请输入有效的电子邮件地址';
} else {
document.getElementById('error-message').innerText = '';
// 提交到服务器的逻辑(这里只是模拟)
console.log('注册信息已提交');
}
});
```
阅读全文