背景介绍
在现代网页应用开发中，用户输入的验证功能是确保数据质量的重要环节。本项目旨在实现一个简单的网页表单验证功能，验证输入的姓名和年龄是否符合特定规则（如姓名包含数字、年龄在18-65岁之间）。该功能通过文件读写、数据处理和表单验证逻辑实现，可独立运行，无需依赖框架。
思路分析
- 验证逻辑存储
本项目采用本地文件保存验证规则，确保数据安全和可维护性。验证规则文件（如user_rules.txt）存储验证条件，例如：用户姓名必须包含数字且长度为3-6位 年龄必须为18-65之间整数 - 表单展示界面
使用HTML、CSS和JavaScript实现表单验证界面，通过输入字段和错误提示信息展示验证结果。前端代码负责验证逻辑的实现及界面渲染。 -
数据处理核心
通过文件读写技术读取验证规则，处理用户输入数据，并根据规则判断是否有效。例如，验证姓名是否包含数字，年龄是否在指定范围内。
代码实现
# user_rules.txt
user_rules = {
"name": "必须包含数字且长度为3-6位",
"age": "必须为18-65之间的整数"
}
# main validation function
def validate_form(name, age):
if name.isdigit() and len(name) in (3, 4, 5, 6, 7, 8, 9):
if age >= 18 and age <= 65:
return True
return False
return False
def show_result(valid):
if valid:
print("验证结果：输入有效！")
else:
print("验证结果：输入无效！")
表单验证页面实现
HTML/CSS/JS示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f2f2f2;
}
h2 {
text-align: center;
color: #333;
}
input, label {
display: block;
margin-bottom: 5px;
color: #666;
}
button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<form id="form-validation">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="18" max="65" required><br>
<button type="submit">验证</button>
</form>
<script>
const form = document.getElementById('form-validation');
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = form.querySelectorAll('input[name="name"]').value;
const age = form.querySelectorAll('input[name="age"]').value;
// 验证逻辑
let valid = validate_form(name, age);
if (valid) {
document.getElementById('result').textContent = '验证结果：输入有效！';
} else {
document.getElementById('result').textContent = '验证结果：输入无效！';
}
});
function validate_form(name, age) {
const rules = {
name: "必须包含数字且长度为3-6位",
age: "必须为18-65之间的整数"
};
const result = rules[name];
const resultAge = rules[age];
// 验证逻辑
if (name.match(/^[0-9]{1,6}$/)) {
if (age >= 18 && age <= 65) {
return true;
}
} else {
return false;
}
}
function show_result() {
const result = document.getElementById('result');
result.textContent = '验证结果：';
result.textContent += (valid ? '有效！' : '无效！');
}
</script>
<div id="result"></div>
总结
本项目通过文件读写技术实现验证逻辑，并结合前端表单展示，实现了姓名和年龄的输入验证功能。该实现满足用户需求，具备良好的可扩展性和可维护性。通过代码示例和完整验证流程，展示了如何利用Python进行数据验证，并为用户提供完整的验证界面功能。