# 网页表单验证实现

背景介绍

本项目旨在实现一个简单的网页表单，用户输入姓名和年龄后，系统自动验证并显示验证结果。表单验证的核心功能要求系统能够读取用户输入，验证年龄是否符合指定范围（18~35岁），并输出验证结果。该实现采用HTML、JavaScript和本地文件处理技术，结合数据结构和算法验证逻辑。

思路分析

1. 技术实现思路

前端界面：使用HTML和JavaScript构建表单，包含姓名输入框、年龄输入框及验证区域。
数据验证逻辑：通过JavaScript验证用户输入的年龄是否在指定范围内，若错误则提示错误信息。
本地文件处理：通过读取本地文件（如用户输入的文本）获取用户信息。
用户交互设计：验证结果以简洁格式展示，包括姓名和验证结果。

2. 代码实现

# 项目实现代码：网页表单验证示例  

# 读取用户输入  
import sys

user_input = sys.stdin.read().strip()

# 解析输入数据  
name, age_str = user_input.split('\n')[0].split()
age = int(age_str)

# 验证年龄逻辑  
if 18 <= age <= 35:  
    result = f"姓名：{name}\n年龄：{age} ✅\n验证结果：用户年龄在18~35岁之间"  
else:  
    result = f"姓名：{name}\n年龄：{age} ✅\n验证结果：用户年龄不在18~35岁之间"  

# 输出结果  
print(result)

代码实现

1. HTML表单结构

<!DOCTYPE html>
<html lang="en">
<head>
    <title>姓名验证</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        h2 {
            color: green;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h2>姓名验证</h2>
    <form>
        <label>姓名：</label>
        <input type="text" id="name-input" placeholder="请输入姓名"><br>
        <label>年龄：</label>
        <input type="number" id="age-input" placeholder="请输入年龄"><br>
        <button type="submit">提交</button><br>
    </form>
    <p id="result-display"></p>
</body>
</html>

2. JavaScript验证逻辑

document.getElementById('submit-btn').addEventListener('click', function () {
    const name = document.getElementById('name-input').value.trim();
    const age = parseInt(document.getElementById('age-input').value);

    if (isNaN(age)) {
        alert('请输入有效的数字！');
        return;
    }

    if (18 <= age && age <= 35) {
        document.getElementById('result-display').textContent = `姓名：${name}\n年龄：${age} ✅\n验证结果：用户年龄在18~35岁之间`;
    } else {
        document.getElementById('result-display').textContent = `姓名：${name}\n年龄：${age} ✅\n验证结果：用户年龄不在18~35岁之间`;
    }
});

总结

本项目通过简单的技术实现，验证用户姓名和年龄，并输出验证结果。代码实现部分结合了数据读取、验证逻辑和用户交互设计，确保结果准确且易于理解。

可运行性说明

该代码在本地运行，无需依赖外部文件或服务器环境。验证逻辑基于简单条件判断，适用于基础前端开发项目。代码注释清晰，便于理解和维护。