Zod项目中实现密码与确认密码的实时验证

在表单验证场景中，密码与确认密码的匹配验证是一个常见需求。Zod作为TypeScript优先的模式验证库，提供了灵活的方式来实现这一功能。

问题背景

开发者在使用Zod进行表单验证时，经常需要确保用户输入的密码和确认密码字段保持一致。理想情况下，这种验证应该在用户输入时实时进行，而不必等待其他所有验证通过后才执行。

解决方案

Zod提供了.refine()方法，允许开发者添加自定义验证逻辑。结合.pipe()方法，可以构建出既支持实时验证又保持完整验证流程的方案。

const schemaBase = z.object({
    password: z.string(),
    passwordConfirmation: z.string(),
});

const schema = schemaBase
    .passthrough()
    .refine(({ password, passwordConfirmation }) => 
        password === passwordConfirmation, {
        message: '密码必须匹配',
        path: ['passwordConfirmation'],
    })
    .pipe(
        schemaBase.extend({
            someOtherProp: z.string(),
        })
    );

实现解析

1. 基础模式定义：首先定义包含密码和确认密码字段的基础模式
2. 实时验证：使用.refine()添加自定义验证逻辑，比较两个密码字段
3. 错误定位：通过path参数指定错误关联的字段
4. 扩展验证：使用.pipe()方法在实时验证后继续其他验证

验证效果

当密码不匹配时，Zod会立即返回错误信息，而不会等待其他验证完成：

const result = schema.safeParse({
    password: '123',
    passwordConfirmation: '12',
    someOtherProp: 'foo',
});

if (!result.success) {
    console.log(result.error.issues);
    // 输出: [{ code: "custom", message: "密码必须匹配", path: ["passwordConfirmation"] }]
}

最佳实践建议

1. 对于复杂表单，建议将不同验证逻辑分层处理
2. 使用.passthrough()保持原始字段不被过滤
3. 考虑将密码验证逻辑提取为可复用函数
4. 结合前端框架实现真正的实时验证体验

这种模式不仅适用于密码验证，也可推广到其他需要交叉验证字段的场景，如邮箱确认、电话号码验证等。Zod的灵活性使得开发者能够根据具体需求设计出最优的验证流程。