前端表单提交校验.前端操作.不满足则无法提交.基于若依框架升级

最新推荐文章于 2026-06-13 16:07:18 发布

原创最新推荐文章于 2026-06-13 16:07:18 发布 · 900 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #java #vue

MonicaTeaCat 专栏收录该内容

24 篇文章

订阅专栏

文章讲述了在若依框架上进行表单提交时的数据验证过程，重点在于使用布尔变量检查选项是否被选中，以及对表单字段是否为空的校验。如果属性值为空，将提示用户填写完整并返回错误信息。最后，只有当所有验证通过后，才会执行表单提交操作。

表单提交是基于若依框架之上的
1.首先定义一个布尔标志变量isValid
你还要定义一个是否被选择的布尔变量,来校验是否被选中,
如果你的变量是字符串而不是布尔,这将导致这个方法会出现莫名错误
所以如果是,请手动转换一下:
formData.xuanze === 'true' ? true : (formData.xuanze === 'false' ? false : false);
方法其他部分代码不再进行讲解,无非是判断,校验.

 let isValid = true;
                formDataCollection.forEach(formData => {
                    console.log("wt"+formData.xuanze+formData.projectName)
                    formData.xuanze === 'true' ? true : (formData.xuanze === 'false' ? false : false);
                    if (formData.xuanze===true) {  // 判断 xuanze 是否为真
                        for (const key in formData) {
                            console.log(key); // 输出当前对象的所有属性名
                            if (formData.hasOwnProperty(key)) {
                                if (formData.hasOwnProperty(key) ) {
                                    if (formData[key] == null || formData[key] === '') {  // 判断属性值是否为空
                                        isValid = false;
                                        console.log(`属性${key}的值为空：${JSON.stringify(formData)}`); // 输出当前遍历到的对象和存在问题的属性名
                                        this.$message.error(`${formData.projectName} 的有属性值没填写，请填写完整！`);
                                    }
                                }
                            }
                        }
                    }
                });

                if (isValid) {
                    this.$refs["form"].validate(valid => {
                        if (valid) {
                            if (this.form.id != null) {
                                console.log("id")
                                console.log(this.form.id)


                                addTestReport(this.form).then(response => {
                                    // console.log(response)
                                    this.$modal.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                });
                            }
                        }
                    });
                }