如何为FluentUI TextField组件实现多条校验规则提示

问题背景 #

当前正在将旧有Knockout页面迁移重构为React版本，需要为FluentUI TextField组件添加多条校验规则，实现上图所示的多错误提示并列展示效果。现有单条校验实现代码如下：

const nameValidation = new RegExp("^$|^[A-Za-z][-A-Za-z0-9]{4,48}[A-Za-z0-9]$");

const validateAndGetError = (value:string): string =>  {
    return nameValidation.test(value) ? "" : ClientResources.Error.Message.validationEntityNameInvalid;
}
// 校验逻辑通过onGetErrorMessage传入TextField组件
<TextField 
  styles={fieldStyles} 
  placeholder={props.nameFieldPlaceholder} 
  onGetErrorMessage={validateAndGetError} 
  validateOnFocusOut 
  onChange={(_, n) => setName(n)} 
/>

实现方案 #

FluentUI TextField的onGetErrorMessage属性原生支持返回JSX元素，并非只能返回单条字符串，直接将多条错误按列表结构返回即可实现目标效果，无需修改组件源码或引入额外依赖。

步骤1：拆分单维度校验规则 #

将原有聚合的正则校验拆分为独立的单规则函数，每条规则对应一项校验要求，校验通过返回空字符串，不通过返回对应错误提示：

// 非空校验
const validateNotEmpty = (value: string) => value.trim() ? "" : "名称不能为空";
// 首字符校验
const validateStartWithLetter = (value: string) => /^[A-Za-z]/.test(value) ? "" : "名称必须以英文字母开头";
// 长度校验
const validateLength = (value: string) => {
  const validLength = value.length >=6 && value.length <=50;
  return validLength ? "" : "名称总长度需为6-50位";
}
// 字符规则校验
const validateValidChar = (value: string) => {
  const validContent = /^[A-Za-z][-A-Za-z0-9]*[A-Za-z0-9]$/.test(value);
  return validContent ? "" : "名称仅支持英文字母、数字、连字符，且尾字符不能为连字符";
}

步骤2：改写聚合校验函数 #

遍历所有单规则收集错误项，存在错误时返回渲染好的列表JSX，无错误返回空字符串即可：

const validateAndGetError = (value: string): string | JSX.Element => {
  // 收集所有未通过的校验提示
  const errorMessages = [
    validateNotEmpty(value),
    validateStartWithLetter(value),
    validateLength(value),
    validateValidChar(value)
  ].filter(Boolean);

  // 无错误直接返回空
  if (!errorMessages.length) return "";

  // 返回错误列表，样式可根据项目设计调整
  return (
    <ul style={{ margin: '4px 0 0', paddingLeft: 20, listStyleType: 'disc' }}>
      {errorMessages.map((msg, idx) => (
        <li key={idx} style={{ lineHeight: 1.5 }}>{msg}</li>
      ))}
    </ul>
  )
}

步骤3：保持原有组件接入方式不变 #

新的校验函数直接替换原有单条校验逻辑传入onGetErrorMessage即可，原有validateOnFocusOut、onChange等属性不需要调整，组件会自动渲染返回的错误内容。

实用提示：

• 如果不需要页面首次加载就触发校验，可以给TextField加上validateOnLoad={false}属性
• 错误列表的间距、行高、字号都可以通过内联样式或者TextField的errorMessage样式自定义，和全局表单样式对齐
• 错误提示文案可直接替换为项目内已有的多语言配置项，不需要额外做适配

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