如何用Yup+Formik+Material UI实现指定校验仅高亮不显示提示

可以实现，核心逻辑是拆分校验的错误状态判断和错误文案展示逻辑，分两步改造即可：

步骤1：调整Yup校验规则 #

给两个校验规则设置不同的返回值，格式校验失败时返回空字符串或特殊标识的错误信息：

const YUP_STRING = Yup.string().ensure().trim();

const validationSchema = yup.object().shape({
   code: YUP_STRING.test(
    'duplicateCheck',
    '该编码已存在',
    code => code !== prohibitedCode
  ).test(
    'formatCheck',
    '', // 格式校验失败时返回空错误文案
    code => codeValidator.validate(code)
  );
});

步骤2：调整Material UI字段的渲染逻辑 #

原来的错误状态判断默认会把空字符串的错误判定为无错误，需要拆分错误状态和错误提示的判断规则：

<TextField
  name="code"
  label="业务编码"
  value={formik.values.code}
  onChange={formik.handleChange}
  onBlur={formik.handleBlur}
  // 错误状态判断：只要字段被触碰且存在对应错误（无论错误文案是否为空）就触发高亮
  error={formik.touched.code && formik.errors.code !== undefined}
  // 错误提示判断：仅当错误文案非空时才展示
  helperText={formik.touched.code && formik.errors.code || undefined}
/>

可选更稳妥的实现方案 #

如果担心空字符串会被后续逻辑误判，可以给格式校验设置带特殊标识的错误，渲染时过滤即可：

// 校验规则改造
const validationSchema = yup.object().shape({
   code: YUP_STRING.test(
    'duplicateCheck',
    '该编码已存在',
    code => code !== prohibitedCode
  ).test(
    'formatCheck',
    function(code) {
      if (!codeValidator.validate(code)) {
        return this.createError({
          message: 'FORMAT_ERROR',
          type: 'hidden_error'
        })
      }
      return true
    }
  );
});

// 渲染逻辑调整
<TextField
  // ...其他属性不变
  helperText={
    formik.touched.code && 
    formik.errors.code && 
    formik.errors.code !== 'FORMAT_ERROR' 
      ? formik.errors.code 
      : undefined
  }
/>

Yup默认按顺序执行校验规则，第一个重复校验失败后不会触发第二个校验，刚好满足第一个校验优先级更高的需求。

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