Ant Design 常见用法与坑点总结（一）

前言

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() 等方法使用。

但个人认为，方式一的写法更加优雅，并且一般情况下，方式一也足够使用了，可以解决日常工作大部分自定义表单验证规则的场景。