Ant Design Vue的Form表单验证_ant design vue form input trigger

在这里要使用v-decorate，v-decorate类似于v-model，但是v-decorator可以更方便的添加校验，必填项等；v-model可以更方便地获取值以及设置值，这个是二者在开发时最明显的区别。

第一步：表单a-form需要使用this.form属性，就必须进行包装，在进行表单验证之前要对a-form 绑定 :form="form"：

<a-form :form="form">

 第二步：在data内定义：form: this.$form.createForm(this)

    data() {
        return {
            form: this.$form.createForm(this),
        };
    },

第三步：在form表单中的input输入框绑定v-decorator语句

<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="编号" hasFeedback>
    <a-input placeholder="请输入编号" v-decorator="['no', verification.no]" />
</a-form-item>

v-decorator="['no', verification.no]"
               //no是表单绑定的名字，一般是在这个输入框输入值的英文标识
               //verification是表单验证规则的集合体名称
               //.on是verification中的一项验证规则

第四步：编写验证规则，具体方法看Ant Design Vue开发文档

    data() {
        return {
            form: this.$form.createForm(this),
            // 表单验证
            verification: {
                no: {
                    // 验证规则
                    rules: [{ required: true, message: '必须填写编号' }],
                    trigger: 'blur'
                },
            }
        };
    },

通过以上配置就可以完成对表单输入的验证

若想在点击确认时候再次进行验证则需要在methods中对点击确认事件绑定this.form.validateFields方法：

handleOk() {
    this.form.validateFields((err, values) => {
    console.log(err);
    console.log(values);
    })
},