在这里要使用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);
    })
},

Logo

前往低代码交流专区

更多推荐