Ant Design Vue的Form表单验证
简单的Ant Design Vue的Form表单验证
·
在这里要使用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);
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)