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.Itemname="mobile"label="手机号码或座机"rules={[{ required: true, message: "请输入手机号码或座机号码" },{ pattern: /......../, message: "请输入正确的手机号或座机号" }]}
><Input placeholder="请输入手机号或座机号" />
</Form.Item>

Form 表单自定义校验规则的两种写法

自定义表单校验规则灵活度更高，可以针对一些特殊场景、特殊规则进行设置。日常工作使用概率比较大。

方式一：对象写法

<Form.Itemname="mobile"label="手机号"rules={[{ // rule 参数是 Form.Item 的校验规则 rulesvalidator: (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.Itemname="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() 等方法使用。

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