antd vue表单验证_antdv 表单动态规则校验

表单动态规则校验

通过表单 a-form 组件自带的 v-decorator 指令，可以很方便的实现表单项的校验，以及 change 事件监听。

复制代码

// vue data

this.formItems.username = [

'username',

{

rules: [

{

required: true,

message: '请输入用户名',

},

],

},

];复制代码

但是可能会遇到表单内，有部分表单项 二选一 的校验情况。比如：下面的表单注册示例(用户名 or 邮箱只提交一项即可)

这时，就需要当用户输入用户名后，移除邮箱的校验；反之，输入邮箱时，移除用户名校验。同时，如果两者都输入时，又需要保持对应的校验逻辑。

那怎么实现呢？下面说下相关细节：

1. 怎么收集表单值？

使用 validateFields 方法，其内部的回调中 values 对象就是当前表单所有输入的值：

this.form.validateFields((err, values) => {

if (!err) {

this.$message.info('提交成功');

}

});复制代码

2. 如何收集指定表单项？

上面这方法相比都用过，但它有个细节，可以在回