Formio.js 中关于只读表单校验问题的技术解析

问题背景

在表单处理库Formio.js的使用过程中，开发者发现了一个值得注意的行为特性：当表单被设置为只读(readOnly)模式时，调用checkValidity方法总是返回true，即使表单数据实际上并不符合校验规则。这一现象与常规的表单校验预期不符，引起了开发者社区的讨论。

技术原理分析

经过深入分析，这一行为实际上是符合HTML5规范的设计。根据WHATWG HTML标准规范，当一个输入元素被标记为readonly时，该元素会被排除在约束验证(constraint validation)之外。这意味着浏览器原生的表单校验机制会主动忽略只读字段的验证。

Formio.js作为基于Web标准的表单库，遵循了这一规范原则。在实现上，当表单被设置为只读模式时，库内部会跳过所有字段的校验逻辑，直接返回验证通过的结果。这种设计确保了与浏览器原生行为的一致性。

实际应用场景

在实际业务中，确实存在一些特殊场景需要验证只读表单的数据有效性。例如：

1. 多用户协作表单系统：一个用户可能正在编辑表单，而其他用户需要查看并提交该表单
2. 表单预览功能：在发布前预览表单时仍需要确保数据有效性
3. 工作流系统：不同阶段可能需要对表单数据进行验证

解决方案探讨

虽然Formio.js官方表示不会改变这一默认行为以保持与Web标准的一致性，但开发者可以通过以下方式实现需求：

临时解决方案

const checkValidity = async (form, submission) => {
  if(form){
    const el = document.createElement('div');
    let instance = null;

    await Formio.createForm(el, form)
      .then((form) => {
        form.submission = submission;
        instance = form;
      });

    if(instance !== null){
      return instance.checkValidity(null, false);
    }
  }
};

这种方法通过动态创建表单实例并强制校验，虽然可行但存在性能开销。

推荐方案

对于需要校验只读表单的场景，建议：

1. 在业务逻辑层单独实现数据校验
2. 使用表单的JSON Schema进行独立验证
3. 考虑在设置只读属性前先完成数据验证

最佳实践建议

1. 明确区分只读展示和实际提交的场景
2. 对于关键业务数据，建议在服务端增加验证逻辑
3. 在需要强制验证的场景，可以临时移除只读属性进行验证
4. 考虑使用专门的校验库如ajv等进行数据验证

总结

Formio.js中只读表单的校验行为是遵循Web标准的合理设计。开发者需要理解这一行为背后的技术原理，并根据实际业务需求选择合适的解决方案。在复杂业务场景下，结合多种验证方式可以构建更健壮的表单处理流程。