背景
表单验证是前端应用的核心功能之一，Ant Design Vue的表单验证系统设计充分考虑了灵活性和可扩展性。
问题驱动
遇到了什么问题？
- 如何支持多种验证规则（必填、格式、自定义等）？
- 如何处理异步验证？
- 如何实现验证状态的实时反馈？
为什么现有方案不够好？
传统表单验证方案通常耦合度高，难以扩展和复用。
解决方案
验证规则系统
// 验证规则定义typeRule={required?:boolean;message?:string;type?:string;pattern?:RegExp;min?:number;max?:number;validate?:(value:any)=>boolean|Promise<boolean>;trigger?:'change'|'blur'|Array<'change'|'blur'>;};// 验证执行器constvalidateField=(value:any,rules:Rule[])=>{consterrors:string[]=[];for(construleofrules){if(rule.required&&(!value||value==='')){errors.push(rule.message||'This field is required');continue;}if(rule.pattern&&value&&!rule.pattern.test(value)){errors.push(rule.message||'Invalid format');continue;}// ... 其他验证逻辑}returnerrors;};// 表单验证管理classFormValidator{privatefields:Map<string,FieldValidator>=newMap();addField(name:string,rules:Rule[]){this.fields.set(name,newFieldValidator(rules));}asyncvalidate(){constresults=awaitPromise.all(Array.from(this.fields.entries()).map(async([name,validator])=>{consterrors=awaitvalidator.validate();return{name,errors};}));returnresults.filter(result=>result.errors.length>0);}}异步验证处理
// 异步验证实现constasyncValidate=(value:any,rule:Rule)=>{returnnewPromise<string[]>((resolve)=>{if(rule.validate&&typeofrule.validate==='function'){constresult=rule.validate(value);if(resultinstanceofPromise){result.then(isValid=>{resolve(isValid?[]:[rule.message||'Validation failed']);}).catch(()=>{resolve([rule.message||'Validation error']);});}else{resolve(result?[]:[rule.message||'Validation failed']);}}else{resolve([]);}});};实现细节亮点
验证状态管理
- 支持实时验证和提交时验证
- 提供验证状态的统一管理
- 支持验证错误的收集和展示
国际化支持
- 验证消息支持国际化
- 提供默认验证消息模板
扩展性设计
- 支持自定义验证规则
- 可扩展的验证触发机制
最佳实践
- 验证规则应与UI组件解耦
- 异步验证需考虑性能影响
- 验证错误应及时反馈给用户
经验总结
通过模块化设计，Ant Design Vue的表单验证系统实现了高可扩展性和易用性，能够满足各种复杂的验证需求。
