Antd Modal如何根据后端返回条件动态展示校验提示？

核心思路是将字段校验规则、提示文案做配置化管理，通过统一遍历校验收集不合规项，完全避免冗余的if/else分支判断。

1. 定义可扩展的字段校验配置表 #

把所有需要校验的字段、对应的校验逻辑、不通过时的展示文案统一维护在配置对象中，后续新增字段、调整规则只需要修改这部分配置，不需要改动弹窗和核心校验逻辑：

// 字段校验配置：key和后端返回的字段名保持一致
const fieldValidateRules = {
  nameval: {
    // 校验函数：返回true代表字段合规，false代表不合规，可根据业务需求自定义规则
    validate: (value) => Boolean(value) && value.trim() !== '',
    // 不合规时在弹窗中展示的字段名
    displayName: 'name'
  },
  group: {
    validate: (value) => value !== null && value !== undefined,
    displayName: 'nameclass'
  },
  numberclass: {
    validate: (value) => Number(value) > 0,
    displayName: 'numberclass'
  },
  ageover: {
    validate: (value) => Number(value) >= 18,
    displayName: 'ageover'
  }
}

你可以根据实际业务需求修改每个字段的validate逻辑，不管是长度校验、正则匹配、数值范围判断都可以直接在对应函数里实现。

2. 编写通用校验函数收集不合规字段 #

拿到后端返回数据后，遍历上述配置，自动收集所有校验不通过的字段展示名：

/**
 * 获取所有不合规的字段提示列表
 * @param {Object} backendData 后端返回的res.data
 * @returns {Array<string>} 不合规字段的展示名列表
 */
const getInvalidFieldList = (backendData) => {
  return Object.entries(fieldValidateRules).reduce((result, [fieldKey, rule]) => {
    const fieldValue = backendData[fieldKey]
    if (!rule.validate(fieldValue)) {
      result.push(rule.displayName)
    }
    return result
  }, [])
}

3. 动态拼接弹窗内容触发提示 #

校验完成后，只要存在不合规字段就弹出Modal，把收集到的字段列表动态拼接到title中即可：

// 接口返回后执行逻辑
const backendData = res.data
const invalidFields = getInvalidFieldList(backendData)

if (invalidFields.length > 0) {
  Modal.confirm({
    centered: true,
    title: `Sorry, you cannot create Menu without satisfying the following conditions: \n\n ${invalidFields.join('\n ')}`,
    okText: 'okay',
    cancelText: 'cancel',
    onOk: () => {
      this.props.setForm('')
    }
  })
}

方案效果 #

• 当传入{ nameval: 'jan', group:null, numberclass:5, ageover:21}时，校验后仅会收集到不合规的group字段对应提示，弹窗仅展示该字段
• 当传入{ nameval:'', group:null, numberclass:0, ageover:0}时，所有字段都会被判定为不合规，弹窗会列出全部提示项
• 后续新增校验字段只需要在fieldValidateRules中加一项配置即可，不需要写额外的分支判断

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