Ant Design表單：如何為同一字段設置不同觸發時機的多重校驗規則？

Ant Design表單：如何為同一字段設置不同觸發時機下的多重校驗規則？

Ant Design 3 的Form 表單如何為單個字段設置多個校驗規則，並分別指定其觸發時機（例如， onChange或onBlur ）？本文將提供一種高效的解決方案，避免自定義組件的複雜性。

假設需要為一個字段設置三個校驗規則：前兩個在值改變時( onChange ) 立即校驗，最後一個在失去焦點時( onBlur ) 校驗。直接使用rules屬性並不能滿足這一需求。

解決方案：

核心思路是將校驗規則分組，並利用form.validateFields方法在onBlur事件中手動觸發特定規則的校驗。

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

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

2. 條件校驗：在表單字段組件中，監聽onBlur事件：

 const MyComponent = ({ form }) => {
  const [fieldName] = useState('myField'); // 要校驗的字段名const handleBlur = () => {
    form.validateFields([fieldName])
      .then(() => {
        // 校驗成功後的操作})
      .catch((errorInfo) => {
        // 校驗失敗後的操作});
  };

  return (
    

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

注意： rules屬性中只包含trigger: 'onChange'的規則， onBlur規則在handleBlur函數中通過form.validateFields方法觸發。

通過這種方法，我們利用了Ant Design Form 的內置校驗機制，並通過手動觸發validateFields來實現不同觸發時機的多重校驗，避免了直接修改樣式而無法影響表單校驗結果的問題，從而保持了表單校驗的完整性和靈活性。

以上是Ant Design表單：如何為同一字段設置不同觸發時機的多重校驗規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！