问题1:添加表单验证后,还没有填写数据就校验
解决方法:
- input:添加 :validate-event="false"
<el-form-item label="产品编号" prop="productNo">
<el-input v-model="form.productNo" :validate-event="false"></el-input>
</el-form-item>
- select:修改表单验证规则 trigger: 'blur'
rules: {
projectName: [
{ required: true, message: '该字段是必须的', trigger: 'blur' }
]
}
结果:
问题2:element表单同时验证3个表单
// 提交按钮
submitForm(formName) {
Promise.all([
this.$refs.form1.validate(),
this.$refs.form2.validate(),
this.$refs.form3.validate()
]).then(() => {
console.log('所有表单验证通过');
}).catch(() => {
console.error('至少有一个表单验证失败');
});
},
// 取消按钮
resetForm(formName) {
this.$refs['form1'].resetFields();
this.$refs['form2'].resetFields();
this.$refs['form3'].resetFields();
this.dialog.visible = false
},