如何用HTML和TypeScript实现表单字段（如patientID）的唯一性验证

核心逻辑 #

要保证输入的patientID唯一，本质是维护一个已存在ID的数据源，每次用户输入新ID时，检查这个数据源里是否已经有该值。根据数据是否需要持久化，分两种场景处理：

1. 纯前端临时验证（适合单页临时数据） #

如果只是在当前页面动态管理数据（比如临时添加患者，不需要存到数据库），可以用Set来存储已有的ID，它自带高效的存在性检查：

// 定义一个集合存已有的PatientID，放在全局或组件状态里
const existingPatientIds = new Set<number>();

// 获取输入框的用户输入
const idString = (document.getElementById('patientIdInput') as HTMLInputElement).value;
let id: number = parseInt(idString);

// 先做数字校验
if (isNaN(id)) {
    document.getElementById("message").innerHTML = "ID必须是数字";
    return;
}

// 新增唯一性校验
if (existingPatientIds.has(id)) {
    document.getElementById("message").innerHTML = "该ID已存在，请换一个";
    return;
}

// 验证通过，把ID加入集合，继续后续操作（比如添加患者数据）
existingPatientIds.add(id);

注意：这种方式页面刷新后集合会清空，只适合临时场景。

2. 前后端结合验证（持久化数据场景） #

如果PatientID需要存到数据库，前端验证只能做快速提示，最终的唯一性必须由后端保障（防止多用户并发提交、前端绕过验证的情况）：

步骤：

1. 前端先做本地已加载ID的快速检查
2. 调用后端接口，让后端查询数据库判断ID是否存在
3. 根据后端返回结果提示用户

// 本地存已加载的ID，用于快速提示
const existingPatientIds = new Set<number>();

// 获取用户输入
const idString = (document.getElementById('patientIdInput') as HTMLInputElement).value;
let id: number = parseInt(idString);

// 数字校验
if (isNaN(id)) {
    document.getElementById("message").innerHTML = "ID必须是数字";
    return;
}

// 本地快速检查
if (existingPatientIds.has(id)) {
    document.getElementById("message").innerHTML = "该ID已存在，请换一个";
    return;
}

// 调用后端接口验证唯一性
async function checkIdUnique(id: number): Promise<boolean> {
    try {
        const res = await fetch(`/api/check-patient-id?patientId=${id}`, {
            method: 'GET',
            headers: {'Content-Type': 'application/json'}
        });
        const data = await res.json();
        return data.isUnique; // 后端返回{ isUnique: true/false }
    } catch (err) {
        console.error('验证出错:', err);
        return false;
    }
}

// 执行验证
const isUnique = await checkIdUnique(id);
if (!isUnique) {
    document.getElementById("message").innerHTML = "该ID已存在，请换一个";
    return;
}

// 验证通过，更新本地集合，继续提交表单等操作
existingPatientIds.add(id);

关键补充：

• 后端必须给数据库的patientID字段加唯一约束（比如MySQL的UNIQUE），即使接口验证漏过，数据库层面也能阻止重复数据插入
• 页面加载时要从后端拉取已有的ID列表，初始化本地的existingPatientIds集合，保证本地数据和后端同步

内容的提问来源于stack exchange，提问作者kams