答案：通过设计规则注册、校验流程和错误反馈机制，实现支持自定义规则的表单验证库。1. 创建Validator类管理规则；2. 注册如required、minLength等内置规则；3. validate方法执行校验并返回错误信息；4. 绑定DOM表单，解析data-rules属性进行验证；5. 支持异步规则扩展，如uniqueUsername检查。
实现一个支持自定义规则的表单验证库，关键在于设计灵活的规则注册机制、清晰的数据校验流程以及可扩展的错误反馈系统。下面是一个轻量但功能完整的实现思路与代码示例。
支持自定义规则的验证核心
验证库的核心是规则管理。每个规则应包含名称、校验逻辑和错误提示。通过注册机制让用户添加或覆盖规则。
以下是一个基础结构：
class Validator {
constructor() {
this.rules = {};
}
// 注册新规则
addRule(name, validator, message) {
this.rules[name] = { validator, message };
}
// 验证单个值
validate(value, rules) {
const errors = [];
for (const [ruleName, param] of Object.entries(rules)) {
const rule = this.rules[ruleName];
if (!rule) continue;
const isValid = typeof rule.validator === 'function'
? rule.validator(value, param)
: false;
if (!isValid) {
errors.push(rule.message.replace('{0}', param));
}
}
return errors.length > 0 ? errors : null;
}
}
内置常用规则与使用方式
提供一些常用规则能提升可用性。比如必填、最小长度、最大长度、正则匹配等。
立即学习“Java免费学习笔记（深入）”；
示例：
const validator = new Validator();
// 添加内置规则
validator.addRule('required', (value) => value != null && value.toString().trim() !== '', '此项为必填');
validator.addRule('minLength', (value, min) => value.toString().length >= min, '最少需要 {0} 个字符');
validator.addRule('maxLength', (value, max) => value.toString().length <= max, '最多允许 {0} 个字符');
validator.addRule('pattern', (value, regex) => new RegExp(regex).test(value), '格式不正确');
// 使用示例
const errors = validator.validate('abc', {
required: true,
minLength: 5,
pattern: '^\\w+$'
});
console.log(errors); // ["最少需要 5 个字符"]
集成到表单元素（DOM 绑定）
让库能直接绑定 HTML 表单，提升实用性。可以通过 data 属性定义规则。
HTML 示例：
JavaScript 绑定：
function bindForm(formElement, validator) {
formElement.addEventListener('submit', function (e) {
e.preventDefault();
let hasError = false;
// 清除旧错误
formElement.querySelectorAll('.error').forEach(el => el.textContent = '');
Array.from(formElement.elements).forEach(input => {
if (!input.name) return;
const rulesAttr = input.getAttribute('data-rules');
if (!rulesAttr) return;
const rules = JSON.parse(rulesAttr);
const value = input.value;
const errors = validator.validate(value, rules);
if (errors) {
hasError = true;
const errorEl = formElement.querySelector(`.error[data-for="${input.name}"]`);
if (errorEl) errorEl.textContent = errors[0];
}
});
if (!hasError) {
console.log('表单验证通过');
// 提交逻辑
}
});
}
// 启用表单验证
bindForm(document.getElementById('myForm'), validator);
扩展性与异步验证支持
未来可扩展异步规则，如检查用户名是否已存在。
例如：
validator.addRule('uniqueUsername', async (value) => {
const res = await fetch(`/api/check-username?name=${value}`);
return await res.json().then(data => !data.exists);
}, '该用户名已被占用');
此时需调整 validate 方法支持异步，返回 Promise。
基本上就这些。这个结构足够灵活，既能快速上手，也能根据项目需求不断扩展规则和交互方式。
