前言

Ant Design 是螞蟻出品的出色優秀的 React 組件庫，相信使用 React 進行管理系統開發的小夥伴們或多或少都接觸過 Ant Design。很多公司基於 React 開發的管理端系統也都是使用 Ant Design 的組件庫。

因此，瞭解 Ant Design 的常見用法與坑點還是有必要的。

本系列文章針對 Ant Design 一些官方文檔雖有提及，但是容易被忽略的，又比較重要常見的用法進行總結。同時對工作使用過程當中遇到的坑點進行歸納。

tip：文章使用的 4.x 版本的 Ant Design。

Form 觸發表單驗證

Form.Item 的 rules 表單驗證規則，需要調用 validateFields() 方法觸發表單驗證才能真正阻止不符合規則的表單的提交。

如果僅僅定義了 rules 規則，而沒有調用 validateFields() 方法進行驗證，即使表單沒通過校驗，依然可以提交。、

const handleSubmit = async () => {
    // 觸發表單驗證，注意該方法是異步的
    await form.validateFields();
    submitForm();
}

<Form.Item
    name="mobile"
    label="手機號碼或座機"
    rules={[
        { required: true, message: "請輸入手機號碼或座機號碼" },
        { pattern: /......../, message: "請輸入正確的手機號或座機號" }
    ]}
>
        <Input placeholder="請輸入手機號或座機號" />
</Form.Item>

Form 表單自定義校驗規則的兩種寫法

自定義表單校驗規則靈活度更高，可以針對一些特殊場景、特殊規則進行設置。日常工作使用概率比較大。

方式一：對象寫法

<Form.Item
    name="mobile"
    label="手機號"
    rules={[
        { 
            // rule 參數是 Form.Item 的校驗規則 rules
            validator: (rule, value) => {
                if(!value) {
                    return Promise.reject(new Error("請輸入手機號"));
                }
                if(value.length > 11) {
                    return Promise.reject(new Error("手機號不超過11位"));
                }
                return Promise.resolve();
            }
        },
    ]}
>
        <Input placeholder="請輸入手機號" />
</Form.Item>

方式二：函數寫法

<Form.Item
    name="password"
    label="賬户密碼"
    rules={[
        ({ getFieldValue }) => ({
            validator(_, value) {
                if(!value) {
                    return Promise.reject(new Error("請輸入賬户密碼"));
                }
                if(value === getFieldValue("password")) {
                    console.log("getFieldValue() 方法獲取對應字段名的值");
                }
                return Promise.resolve();
            }
        })
    ]}
>
        <Input placeholder="請輸入你的賬户密碼" />
</Form.Item>

相比而言，方式二的自由度更高，功能也相對更強大，因為提供了 getFieldValue() 等方法使用。

但個人認為，方式一的寫法更加優雅，並且一般情況下，方式一也足夠使用了，可以解決日常工作大部分自定義表單驗證規則的場景。