ANTD打印2个错误，用于使用预定义规则的自定义验证器

发布于 2025-01-21 08:10:57 字数 1783 浏览 2 评论 0原文

我正在使用ReactJ中的ANTD文本区域，并且具有一些预定义的规则，如：

    const validationRules = [
        {
            required: true,
            message: 'Required',
        },
        {
            min: MIN_LENGTH,
            message: `min ${MIN_LENGTH} characters required`,
        },
    ];

形式项目如下：

<Form.Item name="myField" rules={validationRules}>
  <TextArea
    className="mt-32"   
    rows={6}
    placeholder={`Your answer should be between ${MIN_LENGTH} to ${MAX_LENGTH} characters`}
    minLength={MIN_LENGTH}
    maxLength={MAX_LENGTH}
    value={value}
  />
</Form.Item>;

现在要添加自定义验证规则，即如果用户进入2个以上的尾部空间，请警告他。

为此，我创建了一个自定义验证器AS：

async function validateEmptySpaces(rule: any, inputValue: string) {
  const trimmedValue = inputValue.trim();
  const diffInLength = inputValue.length - trimmedValue.length;
  if (diffInLength > 1) {
    throw new Error("remove empty spaces");
  }
}

因此，我最终将此验证器添加到MU规则中，为：

const validationRules = [
  {
    required: true,
    message: "Required",
  },
  {
    min: MIN_LENGTH,
    message: `min ${MIN_LENGTH} characters required`,
  },
  { validator: validateEmptySpaces },
];

现在，这就是我在UI中看到的方式

在这里，一次不是1个错误，它显示了两个错误。我该如何一次仅显示一条错误消息，例如：

原文

I am using an antd text area in reactjs, and have some predefined rules as :

    const validationRules = [
        {
            required: true,
            message: 'Required',
        },
        {
            min: MIN_LENGTH,
            message: `min ${MIN_LENGTH} characters required`,
        },
    ];

Form Item is as follows:

<Form.Item name="myField" rules={validationRules}>
  <TextArea
    className="mt-32"   
    rows={6}
    placeholder={`Your answer should be between ${MIN_LENGTH} to ${MAX_LENGTH} characters`}
    minLength={MIN_LENGTH}
    maxLength={MAX_LENGTH}
    value={value}
  />
</Form.Item>;

Now want to add a custom validation rule i.e. to warn user if he enters more than 2 tailing spaces.
For this I have created a custom validator as:

async function validateEmptySpaces(rule: any, inputValue: string) {
  const trimmedValue = inputValue.trim();
  const diffInLength = inputValue.length - trimmedValue.length;
  if (diffInLength > 1) {
    throw new Error("remove empty spaces");
  }
}

So I add this validator to mu rules at the end as :

const validationRules = [
  {
    required: true,
    message: "Required",
  },
  {
    min: MIN_LENGTH,
    message: `min ${MIN_LENGTH} characters required`,
  },
  { validator: validateEmptySpaces },
];

Now this is How I get to see in UI