Vue.js 中的 Vuelidate 自定义验证功能答案

【问题标题】：Vuelidate custom validation function in Vue.jsVue.js 中的 Vuelidate 自定义验证功能
【发布时间】：2020-01-16 16:37:16
【问题描述】：

我正在使用 vuelidate 来实现验证并尝试从自定义函数访问整个数据对象（我已经阅读了第二个参数获取数据对象），但它只是获取观察者并且它只有层次结构中相同级别的数据.

我在 x11 上应用了自定义验证，然后我在第二个参数中只得到 x11 和 x12，而不是整个对象。

customFunction(value, wholeObject)
{
console.log(value); //value of x11
console.log(wholeObject); // it is printing observer x11 and x12. I was         
expecting //it will print the whole x object
}

data: {
    x: {
        x1: {
            x11,
            x12
        },
        x2
    }
},

validations: {
    x: {
        x1: {
            x11: CustomFunction,
            x12
        },
        x2
    }
}

这是正确的行为还是我做错了什么？

【问题讨论】：

可以分享代码吗？没有它，很难理解您面临的问题。
我已添加代码
我看不到您在哪里使用自定义功能。所以目前你的代码很好。
我通过调用 CustomFunction 在 x11 上应用验证。您可以在验证属性中看到它。我想在该函数中获取整个数据对象。

标签： javascript vue.js vuelidate

【解决方案1】：

您可以尝试使用以下代码：

function customFunction(value) {
    console.log(value);
    console.log(this);
    return value != '';
}

data: {     
    x: {
        x1: { x11: 'abc', x12: 'pqr'},
        x2: 'lmn'
    }
}

validations: {
    x: {
        x1: {
            x11: CustomFunction,
            x12: required
        },
        x2: required
    }
}

小提琴 -> https://jsfiddle.net/7atc5mwr/

请阅读this page 以了解如何使用自定义验证器并访问组件。

【讨论】：