ant-design-vue表单自定义校验规则以及提交前验证，防止校验未通过发送请求/含a-form-modal-item嵌套校验（详细）

一羊迁徙

于 2020-06-17 23:58:50 发布

阅读量2.2w

点赞数 10

分类专栏： ant-design-vue

本文链接：https://blog.youkuaiyun.com/weixin_43242112/article/details/106820828

版权

本文介绍了如何在Ant Design Vue中实现自定义表单校验规则，包括手机号验证，以及如何在提交前进行验证以防止未通过校验的数据被发送。同时讲解了a-form-modal-item的嵌套校验方法，确保每个嵌套的校验项都能正确校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant-design-vueForm表单自定义校验规则

一、自定义校验规则

本处以校验手机号为例。

一、页面代码：

<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapperCol= "{ span: 4 }">
            <a-form-model-item label="姓名：" prop="add_phone">
                <a-input v-model="form.add_phone" placeholder="请输入电话号码" />
            </a-form-model-item>
        </a-form-model>

1、a-form-model组件身上的属性：
ref：将当前表单挂载到vue实例身上，方便调用该组件的方法，例如我一会要说的validate，以及resetFields方法等，可以使用是因为ant在提供该组件时，在该组件的内部封装了这些方法。
model：在data模型数据中绑定的表单数据对象。
rules：当前表单的校验规则。

2、a-form-model-item组件身上的属性：
**prop