vue编辑页面提交数据判空的方法

最新推荐文章于 2023-11-26 16:30:52 发布

吃瓜观众__

最新推荐文章于 2023-11-26 16:30:52 发布

阅读量972

点赞数

分类专栏： vue 文章标签： vue js javascript

本文链接：https://blog.csdn.net/A_white_gourd/article/details/117661874

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一种在Vue中验证大量字段是否为空的方法，适用于对象和简单数组的数据结构。该方法通过`requiredParams`函数递归检查对象和数组，如果发现空字段则显示警告并返回false，从而阻止数据提交。示例展示了如何调用该方法进行数据校验，并给出了一个包含嵌套对象和数组的示例数据结构。

摘要由CSDN通过智能技术生成

vue在不使用表单的情况下，提交数据（大量字段）的判空方法：

该方法允许提交的数据有对象跟数组，对象可以嵌套子对象，数组只能是简单形式的数组，如[1,2,3]

requiredParams(target,requiredObj){
    for(let i in requiredObj){
        // Array
       if(Array.isArray(target[i])){
           if(!target[i].length){
               this.$message.warning(`${requiredObj[i]} cannot be empty`)
               return false
           }
       }
       // Object
       else if(Object.prototype.toString.call(target[i]) === '[object Object]'){
           let current = this.requiredParams(target[i],requiredObj[i])
           if(current===false){
               return false
           }
       }
       // val
       else if(!target[i]){
           this.$message.warning(`${requiredObj[i]} cannot be empty`)
           return false
       }
    }
},

该方法i调用：

// 校验
// key:v-model的字段名，对应this.postData的key
// requiredObj[key]:为空的提示字段名

let requiredObj = {
    activityNo: "Activity Number",
    languageCode: "Select Language", // this.postData.languageCode == ["en","es"]
    en:{
        title: "Activity title_en",
        descript: "Activity description-en",
    },
    positiveOpinions:{
        opinionContentEn: "Initiator1 opinion_en",
    },
}
let flag = this.requiredParams(this.postData, requiredObj)
if(flag===false){
    return false
}