vue+elementUI 2个表单验证提交时的问题

两个from表单不同的对象,提交的时候表单验证直接成功了,下面时代码

onSubmit() {
                const form1Valid = this.$refs.registration.validate()
                const form2Valid = this.$refs.customer.validate()
                if (form1Valid && form2Valid) {
                    axios.post("/api/admin/registration/save", this.registration)
                        .then((response) => {
                            this.$message({
                                message: response.data,
                                type: 'success'
                            });
                        }).catch((err) => {
                            console.log(err)
                        })
                    axios.post("/api/admin/customer/update", this.customer)
                        .then((response) => {
                            console.log(response.data)
                            this.list()
                        }).catch((err) => {
                            console.log(err)
                        })
                } else {
                    this.$message({
                        message: '请认真填写',
                        type: 'success'
                    });
                }



            },
            list() {
                this.$router.replace('/registrationList')
            },

img

img

img

img



async onSubmit() {
                const form1Valid =await this.$refs.registration.validate()
                const form2Valid =await this.$refs.customer.validate()

前三行找我这个改一下, 你那个是异步操作,所以不会等校验结果直接就执行后面的代码了 你可以打印输出一下

form1Valid,form2Valid 无论怎么 填写都 是true吗? 你打印一下 。在 不符合rules 规则时 试试

方法用错了,validate()返回的是一个对象,不是bool,你可以这样写const form1Valid = this.$refs.registration.validate((valid, fields)=>valid),valid才是校验值

https://blog.csdn.net/JunVei/article/details/128465384 可以看看这篇博客