设计一个网站注册页面代码,包含账号(随机出现数字、大小写字母、点、下划线,并且长度在6到18之间)、姓名、年龄、手机号、密码,确认密码、邮箱、地址
时间: 2024-09-15 07:04:02 浏览: 38
设计一个简单的网站注册页面HTML代码可以这样开始:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.form-container {
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="form-container">
<h2>用户注册</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="username">账号:</label>
<input type="text" id="username" pattern="^[A-9._]{6,18}$" required><br>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="age">年龄:</label>
<input type="number" id="age" min="1" max="150" required><br>
<label for="phone">手机号:</label>
<input type="tel" id="phone" pattern="\d{11}" required><br>
<label for="password">密码:</label>
<input type="password" id="password" minlength="6" maxlength="20" required><br>
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" required><br>
<label for="email">邮箱:</label>
<input type="email" id="email" required><br>
<label for="address">地址:</label>
<textarea id="address" rows="4" cols="30" required></textarea><br>
<button type="submit">注册</button>
</form>
<p id="errorMessages"></p>
</div>
<script>
function validateForm() {
var username = document.getElementById("username").value;
// 添加更复杂的密码复杂度检查等验证逻辑...
// 如果所有字段都通过验证,清除错误消息并提交表单
if (/* validation passes */) {
document.getElementById("registrationForm").submit();
return false; // 阻止默认提交行为
} else {
// 显示错误信息
return true;
}
}
</script>
</body>
</html>
```
阅读全文