ant-design-vue表单校验 vue3

### 如何在 Vue3 中使用 ant-design-vue 进行表单校验 #### 安装依赖 为了在项目中使用 `ant-design-vue` 的组件库，首先需要安装其最新版本以及必要的工具包。以下是安装命令： ```bash npm install ant-design-vue@next ``` 此命令会自动下载适用于 Vue3 的 `ant-design-vue` 版本[^1]。 --- #### 创建表单并实现校验逻辑 下面是一个完整的示例代码，展示如何通过 `Form` 组件完成基本的表单校验功能： ```vue <template> <a-form :model="formState" @finish="onFinish"> <!-- 用户名输入框 --> <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名!' }]"> <a-input v-model:value="formState.username" placeholder="用户名"></a-input> </a-form-item> <!-- 密码输入框 --> <a-form-item name="password" :rules="[ { required: true, message: '请输入密码!'}, { min: 6, max: 20, message: '密码长度应在6到20之间'} ]" > <a-input-password v-model:value="formState.password" placeholder="密码"></a-input-password> </a-form-item> <!-- 提交按钮 --> <a-button type="primary" html-type="submit">提交</a-button> </a-form> </template> <script> import { defineComponent, reactive } from "vue"; export default defineComponent({ setup() { const formState = reactive({ username: "", password: "" }); const onFinish = (values) => { console.log("成功", values); }; return { formState, onFinish }; } }); </script> ``` 上述代码展示了如何定义一个简单的登录表单，并为其设置校验规则。对于每个字段（如用户名和密码），可以通过 `name` 属性绑定对应的模型数据，并利用 `rules` 配置项指定具体的验证条件[^2]。 --- #### 解决 validate 不执行的问题 如果遇到某些情况下 `validate` 方法未被触发的情况，通常是因为缺少回调函数或者配置错误所致。确保以下几点无误即可解决问题： - **每条规则都需提供明确的消息提示**：例如 `{ required: true, message: '必填'}`。 - **调用 `validateFields()` 或者监听 `@finish` 事件**来触发表单校验流程。 - 如果自定义校验器，则务必显式调用 `callback(null)` 来通知框架已完成当前阶段的处理操作。 --- #### 自定义校验规则 除了内置的基础校验外，还可以编写更复杂的业务逻辑作为补充。比如检查邮箱地址的有效性： ```javascript const customRules = [ { validator: async (_, value) => { if (!value || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) { throw new Error('邮箱格式不正确'); } }} ]; ``` 将其加入对应字段的 `rules` 数组之中即可生效。 ---