AI管家

# 网页表单验证系统实现

背景介绍

本项目旨在实现一个网页表单验证系统，验证用户输入的姓名和年龄是否符合以下规则：
1. 姓名必须为中文字符，长度在1-3个汉字之间；
2. 年龄必须为整数，小于等于40。
通过前端技术实现，无需依赖第三方框架，代码实现可在本地开发环境运行。

思路分析

  1. 数据验证逻辑：需验证姓名和年龄的合法性，结合字符串处理、条件判断等技术。
  2. 前端交互：使用HTML表单输入字段和JavaScript实现验证逻辑，用户输入后触发验证并返回结果。
  3. 文件读写：若需读取本地文件，需实现文件读取和写入操作，但本项目不涉及此功能。

代码实现

1. HTML表单结构

<!DOCTYPE html>
<html>
<head>
    <title>姓名验证</title>
</head>
<body>
    <h2>姓名验证</h2>
    <p>姓名：(输入字段)</p>
    <p>年龄：(输入字段)</p>
    <p id="result">验证结果：姓名有效，年龄有效</p>

    <script>
        function validateForm() {
            const name = document.getElementById('name').value;
            const age = parseInt(document.getElementById('age').value);

            // 验证姓名  
            if (name.trim().length < 1 || !/^[a-zA-Z]+$/.test(name)) {
                alert("姓名必须为中文字符！");
            } else if (name.trim().length > 3) {
                alert("姓名长度必须在1-3个汉字之间！");
            } else {
                // 验证年龄  
                if (age < 0 || isNaN(age)) {
                    alert("年龄必须是整数！");
                } else if (age <= 40) {
                    alert("验证结果：姓名有效，年龄有效");
                } else {
                    alert("年龄必须小于等于40！");
                }
            }
        }

        document.getElementById('submitBtn').addEventListener('click', validateForm);
    </script>
</body>
</html>

2. 使用说明

  • 项目中使用了HTML表单结构，输入字段为文本框，JavaScript验证逻辑实现验证结果的显示。
  • 输入示例：
    姓名：李四
    年龄：18
  • 输出结果：
    验证结果：姓名有效，年龄有效

总结

本项目实现了网页表单验证系统，通过前端交互验证输入数据的合法性。核心知识点包括数据验证、条件判断、文件读写等，能够帮助开发者掌握前端验证逻辑实现。

该实现不仅验证了姓名和年龄的合法性，还展示了前端技术的实践应用。

AI助手