编写html5网站的注册页面 包括注册验证界面 以及js css 代码
时间: 2024-03-22 10:37:06 浏览: 33
以下是一个简单的HTML5注册页面的示例代码,包括注册验证界面和相关的JavaScript和CSS代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<style>
form {
margin: 50px auto;
width: 500px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 0.8em;
}
</style>
</head>
<body>
<form id="registration-form" action="#" method="POST">
<h2>注册</h2>
<label for="username"><b>用户名</b></label>
<input type="text" placeholder="请输入用户名" name="username" id="username" required>
<span class="error" id="username-error"></span>
<label for="password"><b>密码</b></label>
<input type="password" placeholder="请输入密码" name="password" id="password" required>
<span class="error" id="password-error"></span>
<label for="confirm-password"><b>确认密码</b></label>
<input type="password" placeholder="请再次输入密码" name="confirm-password" id="confirm-password" required>
<span class="error" id="confirm-password-error"></span>
<button type="submit">注册</button>
</form>
<script>
// 基本的表单验证
const form = document.getElementById('registration-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
const usernameError = document.getElementById('username-error');
const passwordError = document.getElementById('password-error');
const confirmPasswordError = document.getElementById('confirm-password-error');
form.addEventListener('submit', function(event) {
event.preventDefault();
let isValid = true;
if (usernameInput.value.length < 5) {
usernameError.innerText = '用户名长度不能少于5个字符';
isValid = false;
} else {
usernameError.innerText = '';
}
if (passwordInput.value.length < 8) {
passwordError.innerText = '密码长度不能少于8个字符';
isValid = false;
} else {
passwordError.innerText = '';
}
if (confirmPasswordInput.value !== passwordInput.value) {
confirmPasswordError.innerText = '两次输入的密码不一致';
isValid = false;
} else {
confirmPasswordError.innerText = '';
}
if (isValid) {
alert('注册成功!');
form.submit();
}
});
</script>
</body>
</html>
```
这个示例代码包括一个基本的HTML5表单,包括用户名、密码和确认密码字段。它还包括一些CSS样式,用于使表单看起来更好。最后,它包括一些基本的JavaScript代码,用于验证表单并在验证成功后提交表单。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)