设计一个表单验证器需要从 校验规则 和 规则验证 两个方面来考虑。以下是详细的设计思路和实现步骤：

---

1. 校验规则设计

校验规则是表单验证的核心，通常包括以下内容：

• 字段名称：需要验证的表单字段（如 username、password）。
• 规则类型：验证规则的类型（如 required、minLength、maxLength、regex 等）。
• 规则参数：规则的具体参数（如 minLength: 6 表示最小长度为 6）。
• 错误提示：验证失败时的错误信息。

示例规则：

const rules = {
    username: [
        { type: 'required', message: '用户名不能为空' },
        { type: 'minLength', value: 6, message: '用户名至少 6 个字符' },
        { type: 'maxLength', value: 20, message: '用户名最多 20 个字符' },
    ],
    password: [
        { type: 'required', message: '密码不能为空' },
        { type: 'minLength', value: 8, message: '密码至少 8 个字符' },
        { type: 'regex', value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: '密码必须包含字母和数字' },
    ],
};

---

2. 规则验证设计

规则验证是表单验证器的核心逻辑，需要根据规则类型执行相应的验证逻辑。常见的验证类型包括：

• required：字段是否为空。
• minLength：字段的最小长度。
• maxLength：字段的最大长度。
• regex：字段是否符合正则表达式。
• 自定义验证：支持用户自定义验证函数。

验证逻辑实现：

const validators = {
    required: (value) => !!value, // 非空验证
    minLength: (value, length) => value.length >= length, // 最小长度验证
    maxLength: (value, length) => value.length <= length, // 最大长度验证
    regex: (value, pattern) => pattern.test(value), // 正则验证
};

---

3. 表单验证器实现

结合校验规则和规则验证，可以实现一个通用的表单验证器。

完整代码：

class FormValidator {
    constructor(rules) {
        this.rules = rules;
    }

    // 验证单个字段
    validateField(fieldName, value) {
        const fieldRules = this.rules[fieldName];
        if (!fieldRules) return null; // 如果没有规则，返回 null

        for (const rule of fieldRules) {
            const { type, value: ruleValue, message } = rule;
            const validator = validators[type];

            if (!validator(value, ruleValue)) {
                return message; // 返回错误信息
            }
        }

        return null; // 验证通过
    }

    // 验证整个表单
    validateForm(formData) {
        const errors = {};

        for (const fieldName in this.rules) {
            const error = this.validateField(fieldName, formData[fieldName]);
            if (error) {
                errors[fieldName] = error;
            }
        }

        return Object.keys(errors).length === 0 ? null : errors; // 返回错误对象
    }
}

// 验证器函数集合
const validators = {
    required: (value) => !!value,
    minLength: (value, length) => value.length >= length,
    maxLength: (value, length) => value.length <= length,
    regex: (value, pattern) => pattern.test(value),
};

---

4. 使用示例

定义规则：

const rules = {
    username: [
        { type: 'required', message: '用户名不能为空' },
        { type: 'minLength', value: 6, message: '用户名至少 6 个字符' },
        { type: 'maxLength', value: 20, message: '用户名最多 20 个字符' },
    ],
    password: [
        { type: 'required', message: '密码不能为空' },
        { type: 'minLength', value: 8, message: '密码至少 8 个字符' },
        { type: 'regex', value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: '密码必须包含字母和数字' },
    ],
};

创建验证器并验证表单：

const formData = {
    username: 'test',
    password: '123456',
};

const validator = new FormValidator(rules);
const errors = validator.validateForm(formData);

if (errors) {
    console.log('表单验证失败:', errors);
} else {
    console.log('表单验证通过');
}

输出结果：

表单验证失败: {
    username: '用户名至少 6 个字符',
    password: '密码必须包含字母和数字'
}

---

5. 扩展功能

• 异步验证：支持异步验证规则（如调用 API 检查用户名是否已存在）。
• 动态规则：根据表单数据动态调整验证规则。
• 多语言支持：根据用户语言动态切换错误提示信息。

异步验证示例：

validators.asyncUnique = async (value, checkFn) => {
    const isUnique = await checkFn(value);
    return isUnique;
};

// 使用
rules.username.push({
    type: 'asyncUnique',
    value: async (username) => {
        const response = await fetch(`/api/check-username?username=${username}`);
        const data = await response.json();
        return data.isUnique;
    },
    message: '用户名已存在',
});

---

总结

通过设计 校验规则 和 规则验证，可以实现一个灵活、可扩展的表单验证器。核心思路是将规则与验证逻辑分离，便于维护和扩展。实际项目中可以根据需求进一步优化，如支持异步验证、动态规则等。