ant-design-pro 自定义表单 rules规则

表单输入

复制代码

  <ProFormText
      name="id"
      label={intl.formatMessage({ id: 'pages.secret.form.id' })}
      width="sm"
      rules={[{ validator: checkKeyword }]}
    />

自定义校验

复制代码

  // 自定义关键字规则
  const checkKeyword = (rule: any, value: any, callback: any) => {
    if (!value) {
      callback("内容不能为空!");
    } else if (value === "1") {
      callback("内容不能为1，请您检查！");
    }
    // callback(); 
    // warning: `callback` is deprecated. Please return a promise instead.
    return Promise.resolve();
  };

在表单中校验

复制代码

<ProFormTextArea
    name="apiKey"
    label="apiKey"
    width="xl"
    placeholder={intl.formatMessage({ id: 'pages.secret.form.apiKey.placeholder' })}
    rules={[
      () => ({
        validator(_, value) {
          if (!value) {
            return Promise.reject(new Error("这里不能为空"));
          }
          if (value instanceof Object) {
            return Promise.reject(new Error("请输入正确数据格式"));
          }
          return Promise.resolve();
        },
        required: true,
      }),
    ]}
  />