【async-validator】 在antd组件中使用案例

你想要的效果按下面示例仿写即可，具体使用教程晚点会出

• 示例一：

<ProFormText
	name={['table_info', 'lifetime_min']}
	label='刷新频率'
	labelCol={{ span: 8, offset: 2 }}
	wrapperCol={{ span: 14, offset: 0 }}
	rules={[{ required: true }, { pattern: /^[0-9]*$/, message: '必须是数字格式' }]}
	disabled={mode === 'read' || mode === 'update'}
	placeholder='最小值(单位秒)'
	fieldProps={{ style: { width: 200, textAlign: 'center' } }}
/>
~
<ProFormDependency name={['table_info', 'lifetime_min']}>
{(depFields) => {
  console.log('depFields', depFields.table_info?.lifetime_min)
  let min = depFields.table_info?.lifetime_min
  return (
    <ProFormText
      name={['table_info', 'lifetime_max']}
      label=''
      labelCol={{ span: 0, offset: 0 }}
      wrapperCol={{ span: 16, offset: 0 }}
      rules={[
        { required: true },
        { pattern: /^[0-9]*$/, message: '必须是数字格式' },
        {
          validator: async (rule: any, value: any, callback: Function) => {
            if (Number(min) > Number(value)) {
              // rule: 当前校验字段在 descriptor 中所对应的校验规则，其中的 field 属性是当前正在校验字段的名称
              // value: 当前校验字段的值
              // callback 在校验完成时的回调，传入 Error [或者是一个数组] 代表校验失败
              throw new Error(`最大值要大于最小值`)
            } else {
              return null
            }
          },
        },
      ]}
      disabled={mode === 'read' || mode === 'update'}
      placeholder='最大值(单位秒)'
      fieldProps={{ style: { width: 200, textAlign: 'center', borderLeftWidth: 0 } }}
    />
  )
}}
</ProFormDependency>

• 示例 2：

rules: [
  { required: false },
  {
    validator: async (rule, value) => {
      JSON.parse(value)
      return true
    },
    message: '无效的JSON格式',
  },
],

• 示例 3：

rules={[
  {
    validator: (rule: any, hashNodeNum: number) => {
      if (hashNodeNum % 1 !== 0) {
        return Promise.reject('只能输入整数')
      }
      if (sharedCount % 1) {
        return Promise.reject('开启高可用时,hash节点个数必须为偶数')
      }
      return Promise.resolve()
    },
  },
]}

• 示例 4：

rules={[
	{
	validator: (rule: any, taskConfigDefault: string) => {
	  try {
	    const data = JSON.parse(taskConfigDefault)
	    if (_.isObject(data)) {
	      if (!_.isNumber(_.get(data, 'cache_size'))) {
	        return Promise.reject('cache_size必须为数字')
	      }
	      if (!_.isNumber(_.get(data, 'buffer_size'))) {
	        return Promise.reject('buffer_size必须为数字')
	      }
	      if (!_.isString(_.get(data, 'task_cluster'))) {
	        return Promise.reject('task_cluster必须为字符串')
	      }
	      if (!_.isNumber(_.get(data, 'ack_timeout_secs'))) {
	        return Promise.reject('ack_timeout_secs必须为数字')
	      }
	      if (!_.isNumber(_.get(data, 'flush_timeout_secs'))) {
	        return Promise.reject('flush_timeout_secs必须为数字')
	      }
	      if (!_.isNumber(_.get(data, 'min_flush_timeout_secs'))) {
	        return Promise.reject('min_flush_timeout_secs必须为数字')
	      }
	      return Promise.resolve()
	    } else {
	      return Promise.reject('请输入JSON格式!')
	    }
	  } catch (err) {
	    return Promise.reject('请输入JSON格式!')
	  }
	},
	},
]}

• 示例 5：

rules={[
  { required: true },
  {
    validator: (rule: any, lzGaia: (string | number)[]) => {
      if (lzGaia && lzGaia.length !== 0 && lzGaia.length !== 4) {
        return Promise.reject('数据信息不完整!')
      } else {
        return Promise.resolve()
      }
    },
  },
]}

• 示例 6：

rules={[
  {
    validator: (rule: any, hashNodeNum: number) => {
      if (hashNodeNum % 1 !== 0) {
        return Promise.reject('只能输入整数')
      }
      if (sharedCount % 1) {
        return Promise.reject('开启高可用时,hash节点个数必须为偶数')
      }
      return Promise.resolve()
    },
  },
]}

• 示例 7：

rules: [
 { required: true },
 {
   validator: (rule, value, cb) => {
     if (
       value.schedule_cycle === FlowScheduleCycle.SCHEDULE_CYCLE_MINUTE &&
       value.schedule_step % 5 !== 0
     ) {
       cb('分钟级任务间隔必须是5的整数倍')
     } else if (
       value.schedule_cycle !== FlowScheduleCycle.NON_CYCLIC &&
       value.schedule_step === ''
     ) {
       cb('请输入')
     } else {
       cb()
     }
   },
 },
]

• 示例 8：

rules: [
  { required: true },
  {
    validator: async (rule, value) => {
      if (value > 0) throw new Error('必须小于或等于0')
    },
  },
],

• 示例 9：

rules={[
  {
    required: true,
    message: '请输入枚举值!',
  },
  () => ({
    validator(_, value) {
      if (!value || !/[A-Z]+/g.test(value)) {
        return Promise.resolve()
      }
      return Promise.reject(new Error('请勿输入大写枚举值!'))
    },
  }),
]}

• 示例 10：

export const integerRule = {
  validator: async (ruleObject: any, value: any, cb: Function) => {
    if (value !== undefined && !/^[0-9]+$/.test(value)) {
      throw new Error(`无效格式，'${ruleObject.fullField}'不是整数`)
    }
  },
}