Ant Design Form: How to set multiple verification rules for different triggering times for the same field?

Ant Design Form: How to set multiple verification rules for different triggering opportunities for the same field?

How does Ant Design 3's Form form set multiple check rules for a single field and specify their triggering timings (for example, onChange or onBlur )? This article will provide an efficient solution to avoid the complexity of custom components.

Suppose three check rules need to be set for a field: the first two are checked immediately when the value changes ( onChange ), and the last one is checked when the focus is lost ( onBlur ). Using rules attribute directly does not meet this requirement.

Solution:

The core idea is to group verification rules and use the form.validateFields method to manually trigger verification of specific rules in onBlur event.

1. Rule definition and grouping: Do not place all rules directly in rules property. We can add a trigger attribute to each rule object, for example:

 const rules = [
  { required: true, message: 'required', trigger: 'onChange' },
  { pattern: /^[az] $/i, message: 'Only enter letters', trigger: 'onChange' },
  { min: 6, message: 'at least 6 characters', trigger: 'onBlur' },
];

2. Conditional verification: In the form field component, listen for onBlur events:

 const MyComponent = ({ form }) => {
  const [fieldName] = useState('myField'); // The field name to be checked const handleBlur = () => {
    form.validateFields([fieldName])
      .then(() => {
        // Operation after successful verification})
      .catch((errorInfo) => {
        // Operation after verification failed});
  };

  Return (
    

rule.trigger === 'onChange')}> ); };

Note: rules attribute only contains the rules of trigger: 'onChange' , and the onBlur rule is triggered by form.validateFields method in the handleBlur function.

Through this method, we utilize the built-in verification mechanism of Ant Design Form and manually trigger validateFields to achieve multiple verifications at different trigger times, avoiding the problem of directly modifying the style and not affecting the form verification results, thus maintaining the integrity and flexibility of form verification.

The above is the detailed content of Ant Design Form: How to set multiple verification rules for different triggering times for the same field?. For more information, please follow other related articles on the PHP Chinese website!