Ant Design表單：如何為同一字段設(shè)置不同觸發(fā)時(shí)機(jī)的多重校驗(yàn)規(guī)則？

Ant Design表單：如何為同一字段設(shè)置不同觸發(fā)時(shí)機(jī)下的多重校驗(yàn)規(guī)則？

Ant Design 3 的 Form 表單如何為單個(gè)字段設(shè)置多個(gè)校驗(yàn)規(guī)則，并分別指定其觸發(fā)時(shí)機(jī)（例如，onChange 或 onBlur）？本文將提供一種高效的解決方案，避免自定義組件的復(fù)雜性。

假設(shè)需要為一個(gè)字段設(shè)置三個(gè)校驗(yàn)規(guī)則：前兩個(gè)在值改變時(shí) (onChange) 立即校驗(yàn)，最后一個(gè)在失去焦點(diǎn)時(shí) (onBlur) 校驗(yàn)。直接使用 rules 屬性并不能滿足這一需求。

解決方案：

核心思路是將校驗(yàn)規(guī)則分組，并利用 form.validateFields 方法在 onBlur 事件中手動(dòng)觸發(fā)特定規(guī)則的校驗(yàn)。

1. 規(guī)則定義與分組： 不要將所有規(guī)則都直接放在 rules 屬性中。 我們可以為每個(gè)規(guī)則對(duì)象添加一個(gè) trigger 屬性，例如：

const rules = [   { required: true, message: '必填', trigger: 'onChange' },   { pattern: /^[a-z]+$/i, message: '只能輸入字母', trigger: 'onChange' },   { min: 6, message: '至少6個(gè)字符', trigger: 'onBlur' }, ];

2. 條件校驗(yàn)： 在表單字段組件中，監(jiān)聽 onBlur 事件：

const MyComponent = ({ form }) => {   const [fieldName] = useState('myField'); // 要校驗(yàn)的字段名    const handleBlur = () => {     form.validateFields([fieldName])       .then(() => {         // 校驗(yàn)成功后的操作       })       .catch((errorInfo) => {         // 校驗(yàn)失敗后的操作       });   };    return (     <Form.Item label="我的字段" name={fieldName} rules={rules.filter(rule => rule.trigger === 'onChange')}>       <Input onBlur={handleBlur} />     </Form.Item>   ); };

注意：rules 屬性中只包含 trigger: ‘onChange’ 的規(guī)則，onBlur 規(guī)則在 handleBlur 函數(shù)中通過 form.validateFields 方法觸發(fā)。

通過這種方法，我們利用了 Ant Design Form 的內(nèi)置校驗(yàn)機(jī)制，并通過手動(dòng)觸發(fā) validateFields 來實(shí)現(xiàn)不同觸發(fā)時(shí)機(jī)的多重校驗(yàn)，避免了直接修改樣式而無法影響表單校驗(yàn)結(jié)果的問題，從而保持了表單校驗(yàn)的完整性和靈活性。