Yup中.test()自定义验证规则的错误消息无法显示问题求助

你的验证逻辑能阻止表单提交，说明规则本身没问题，错误消息不显示大概率是表单组件没正确读取数组字段上的错误信息，或者验证逻辑的细节需要调整，以下是具体解决步骤：

• 确认表单库的错误绑定是否正确
  比如用Formik的话，你的自定义test是绑定在owners这个数组字段上的，错误消息会存在errors.owners中，需要在对应区域渲染这个错误：

  {errors.owners && <div className="error-text">{errors.owners}</div>}
  

  可以先在控制台打印errors对象，确认errors.owners里是否存在你定义的错误文本，排除渲染层面的问题。

• 优化自定义test的返回逻辑，避免冲突
  你的第一个test里，当owners为空时返回false，但前面已经有.required('Must select an owner')规则，重复判断可能导致错误覆盖，调整为：

  .test('pct-sum', 'Ownership should be equal to 100%', (owners) => {
    // 空数组的情况交给required规则处理，这里只验证非空场景
    if (!owners || owners.length === 0) return true;
    const sum = _.sumBy(owners, 'pct_owned');
    return sum === 100;
  })
  

  这样每个验证规则的错误只会在对应场景触发，不会互相干扰。

• 确保触发数组字段的整体验证
  部分表单库默认可能只验证数组内的单个元素，不会触发数组本身的验证规则。如果用Formik，可以开启validateOnChange或者在提交时执行全量验证，确保数组字段的自定义test被触发并生成错误消息。

内容的提问来源于stack exchange，提问作者lilsheesh