背景介绍
随着用户信息管理的增加，开发人员需要实现一个简单的Web应用，支持用户注册与登录功能。该功能能够验证用户输入的密码，并通过HTML/CSS界面展示验证结果。通过本地开发，无需依赖第三方库，确保代码的简洁性和可维护性。
思路分析
实现用户注册与登录功能的核心步骤如下：
1. 表单验证：用户输入用户名和密码，验证输入是否符合特定规则（长度、大小写、字符组合）。
2. HTML/CSS页面：创建用户界面，展示验证结果。
3. 密码验证逻辑：使用正则表达式验证密码的长度、大小写及字符组合。
代码实现
HTML页面验证逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册与登录</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
padding: 20px;
display: flex;
flex-direction: column;
}
.form-container {
display: flex;
flex-direction: column;
margin: 20px auto;
width: 300px;
background: #ffffff;
border: 1px solid #ccc;
padding: 20px;
}
.form-group {
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
}
#result {
text-align: right;
margin-top: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>用户注册与登录</h2>
<form id="registerForm">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" placeholder="testuser" required>
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" placeholder="123456" required>
</div>
<div class="form-group">
<button type="button" onclick="validatePassword()">注册</button>
</div>
<div id="result" class="text-result"></div>
</form>
</div>
<script>
function validatePassword() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 密码验证逻辑
const regex = /^[A-Z][a-z][0-9]{8,12}$/;
if (regex.test(password)) {
document.getElementById('result').textContent = '密码验证通过！用户名和密码已验证。';
} else {
document.getElementById('result').textContent = '密码不符合要求。请重新输入。';
}
}
</script>
</body>
</html>
Python 代码验证逻辑
import re
def is_valid_password(password):
# 密码长度验证：8-12位
if len(password) < 8 or len(password) > 12:
return False
# 大小写验证：至少一个大写字母和一个小写字母
if not re.search(r'[A-Z][a-z]', password):
return False
# 数字验证：至少包含数字
if not re.search(r'\d', password):
return False
return True
# 注册用户
def register_user(username, password):
if is_valid_password(password):
print("注册成功！用户名:", username, "密码:", password)
else:
print("密码验证失败。")
# 登录用户
def login_user(username, password):
if is_valid_password(password):
print("登录成功！用户名:", username)
else:
print("密码验证失败。")
# 主流程
username = input("请输入用户名：") or "testuser"
password = input("请输入密码：") or "123456"
try:
register_user(username, password)
login_user(username, password)
except Exception as e:
print("系统错误:", e)
总结
本项目实现了用户注册与登录功能，验证了密码的长度、大小写及字符组合。通过HTML/CSS页面实现用户界面，确保了界面美观且易于使用。密码验证逻辑采用Python的正则表达式验证，确保了密码安全性。整个项目展示了本地开发的简洁性和可维护性，能够满足用户的基本需求。