Form-Create 结合 Naive-UI 实现表单失焦校验的最佳实践

问题背景

在使用 form-create 结合 Naive-UI 开发表单时，开发者可能会遇到一个常见问题：表单输入框在失去焦点时没有自动触发校验规则，必须手动提交表单才能看到校验结果。这不符合现代表单交互的用户体验预期。

问题分析

通过分析 issue 中的代码示例，我们可以看到典型的表单配置：

const testRule = ref([
    {
        type: 'input',
        field: 'field1',
        title: 'field1',
        validate: [{ required: true, type: 'string', message: '请输入field1' }]
    }
])

这种配置下，校验只会在表单提交时触发，而不会在用户输入或离开输入框时自动校验。这会导致较差的用户体验，因为用户无法即时得到反馈。

解决方案

form-create 提供了灵活的校验触发机制。要实现失焦校验，需要在校验规则中添加 trigger 属性：

validate: [
    { 
        required: true, 
        type: 'string', 
        message: '请输入field1',
        trigger: 'blur'  // 添加此行
    }
]

trigger 属性支持多种触发方式：

• blur: 失去焦点时触发
• change: 值改变时触发
• 也可以组合使用，如 ['blur', 'change']

最佳实践建议

1. 组合触发策略：对于大多数输入场景，建议同时使用 blur 和 change 触发

trigger: ['blur', 'change']

2. 性能考虑：对于复杂校验或远程校验，建议仅使用 blur 触发，避免频繁请求

3. 用户体验优化：可以结合 Naive-UI 的反馈机制，在错误时显示明显的提示

4. 特殊字段处理：对于输入数字等特殊字段，建议添加类型校验

{
    type: 'inputNumber',
    validate: [
        { 
            required: true, 
            type: 'number',
            trigger: 'blur'
        }
    ]
}

实现原理

form-create 的表单校验基于 async-validator 库实现。当配置了 trigger 后，组件会在相应的事件触发时调用校验方法。对于 Naive-UI 的集成，form-create 会将这些配置转换为 Naive-UI 组件能理解的 props 和事件。

总结

通过合理配置 trigger 属性，开发者可以轻松实现 form-create 与 Naive-UI 结合的表单失焦校验功能。这种即时反馈的校验方式能显著提升用户体验，是现代化表单开发的基本要求。建议开发者在设计表单时，根据字段特性和业务需求，选择合适的校验触发策略。