antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证

一.项目要求

1.要求：点击新增按钮弹出新增页面，在输入名称时进行验证，当输入名称和列表下的名称相同，即后台数据库中存在，此时将会提醒用户，该名称已存在，

2.要求：该名称不存在，则新增成功

二.思路

1.错误的思路

我刚开始的思路是，准备在点击新增页面中的确定按钮时进行验证，但此时会存在一个问题：

——点击确定时，已经调用了后台新增接口，此时新增的需要输入的表单数据已经传给后台，此时并不能做到验证名称是否存在——和重复，所以此时我通过后台给我的验证接口，验证后台数据库中是否存在该名称将毫无意义

2.正确效果

——应该的效果应该为名称输入和验证应该同时进行，一旦输入数据和下方列表重复，将会出现message提醒，当不输入任何内容时，此时将会提醒此输入框并不能为空

3.正确的思路

——应该使用ant design vue 中的表单验证，自定义验证表单元素，定义表单验证规则

三.步骤

1.定义表单输入框中的值的规则

在ant design vue中， "v-decorator"可以看成是v-model，和vue中的双向绑定作用类似

——v-decorator="[id