javascript - Vuelidate 在页面加载时多次触发

标签 javascript validation vue.js vuejs2 vuelidate

我正在使用 Vue,为了验证,Vuelidate .

当使用执行 AJAX 调用的自定义验证器时,它会在页面加载时触发多次,甚至在用户交互之前(vuelidate 的 $touch)。

在第一次加载这些多次调用后,验证工作正常。 (我在输入更改时使用此验证,使用 vue @change)

我尝试设置一个标志 isMounted 以仅在加载整个实例后在自定义验证器中执行验证,但没有成功。

代码

验证器(仅带调试,用于测试):

validations() {
    return {
        myFieldToValidate(field) {
            test_validation(value) {
                console.log('test validation fired!', Math.random());
                return true;
            }
        }
    }
}

然后,当我重新加载页面时,它会触发多次:

multiple-calls

我想让验证仅基于我的事件(输入更改)“触发”,而不是在页面加载时多次。如何实现?

最佳答案

我结束了创建自己的函数来进行 ajax 调用,与 vuelidate 分开。我用了lodash' _.debounce控制通话。

我将该函数绑定(bind)到 @input 事件,根据它进行 ajax 调用,并返回一个带有结果的“flag”属性。

然后,我使用这个标志来检查字段的有效性。

使用这个错误,事件不会在页面加载时触发多次。

关于javascript - Vuelidate 在页面加载时多次触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54444034/

相关文章:

asp.net - MVC 条件 必填字段

validation - JSF (PrimeFaces) 中的转换器与 SelectOneMenu : Validation Error

validation - 如何向输入字段添加验证?

javascript - Vue 组件作为另一个组件的子组件

javascript - 构建自定义 Tabs 组件时无法在渲染函数中使用 TransitionGroup

vue.js - Vue + Pug - 动态属性名称

javascript - 移动端单列布局,桌面端双列布局

javascript - 将 Ember.js 与 Sock.js 结合使用

javascript - 看不懂这个 Javascript 函数(函数重载)

javascript - Google 语音搜索如何工作?是否有相应的 API?