问题标签 [vuelidate]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
920 浏览

forms - 如何根据选择字段的 onChange 事件在 vuelidate 中启用所需的验证

我必须根据选择字段的 onChange 事件为输入字段启用所需的验证。我在我的项目中使用 vuelidate 包进行表单验证。请提供解决方案来完成它。

我的模板代码如下:

我的脚本如下:

如果用户从下拉列表中选择新选项和其他选项,我想将验证切换为标题和内容字段所需的。请提供解决方案来完成它。提前致谢。

0 投票
1 回答
1101 浏览

validation - Vuelidate,我可以通过 mixin 继承自定义方法吗?

使用 Veulidate,在使用 Vue CLI 构建的项目上使用 VueJS 2,我只是尝试使用自定义方法来验证电话号码。该方法来自位于 main.js 中的全局 mixin。

main.js

表单.vue

看起来很简单,对吧?一遍又一遍,我明白了Cannot read property of 'vd_phone' of undefined。试过vd_phone, this.vd_phone,this.vd_phone()等..

还尝试将方法放入全局方法选项(而不是 mixin)并尝试通过 $root 访问它,如下所示:

main.js

同样的问题!在我的 form.vue 文件中,我尝试使用 , 等访问此方法this.$root.vd_phone$root.vd_phone没有骰子。

这就是我在该主题上找到的全部内容:https ://github.com/vuelidate/vuelidate/issues/308 ,但这似乎是在谈论继承整个验证器属性——而不仅仅是一种方法。

任何帮助表示赞赏。

0 投票
1 回答
1527 浏览

vue.js - 验证是否选中了复选框,具体取决于 vuelidate 中的另一个验证

我只是从 Vue 和 Vuelidate 开始。我有一个表格,它的工作方式如下:

  1. 该表单显示一个是/否单选按钮组。
  2. 如果选择了单选按钮“是”,则表单会显示一个复选框。
  3. 如果以下条件之一为真,则应启用表单的提交按钮:
    1. 单选按钮设置为“否”。或者
    2. 单选按钮设置为“是”并选中复选框。

我遇到了 3 中描述的条件。我当前的验证如下所示:

termsAccepted: { checked: value => value === true }

这基本上适用于案例 3.2,但不适用于 3.1。在这种情况下,表单仍然被禁用。

0 投票
1 回答
227 浏览

javascript - 添加仅适用于 vuelidate 中 $each 的第一个元素的自定义验证器

我正在尝试用来Vuelidate控制表单的输入。我为客户的firstname、 the lastname、 thenationality和 the提供了一个输入字段age

在我的应用程序中,有必要检查第一个客户是否至少 18 岁。

我尝试了以下方法来做到这一点:

现在的问题是,这适用于所有非预期的客户。有没有办法只访问 $each 属性的第一个元素?

0 投票
2 回答
8445 浏览

javascript - 如何正确地将自定义验证添加到 vuelidate 中的数组

我有一组具有以下结构的对象

我创建了一个名为 isDuplicate 的自定义验证,它检查属性“type”的重复值。例如

我能够让我的自定义验证工作。但是,对于数组中存在的所有对象,$invalid 属性将为 false。因此,数组中的所有对象都将以红色突出显示

在此处输入图像描述

下面是我的验证码:

0 投票
1 回答
1990 浏览

vue.js - 检查 Vuelidate 中特定数组索引的值

我在 Vuelidate 中有以下表单数组。但是我怎样才能基于同一个数组索引上的另一个字段的值进行一些验证。

下面是我没有工作的示例,但如果已经为姓氏输入了某些内容,我希望需要姓氏。

0 投票
0 回答
540 浏览

vuejs2 - Vuelidate 自定义验证器

我正在尝试让文档提供的 Vuelidate 自定义验证器与我的 Vutify 一起使用

这是文档中的代码行

当我将它添加到我的验证器时,它似乎不起作用

这是 CodePen

https://codepen.io/jamiebrs/pen/OKjXev?editors=1010

我错过了什么?

0 投票
0 回答
613 浏览

javascript - Vuelidate 错误返回 true 但元素不呈现

我有一个使用 vuelidate 验证字段的联系表单。问题是 - 验证有效,但错误不会呈现。$v.name.dirty 为 TRUE,$v.name.required 为 FALSE。记录 $v.name.dirty && !$v.name.required 返回 TRUE,这与 v-if 指令中的条件相同,但错误元素仍然不显示。

但是,当调用 .$touch() 并且 $v.name.dirty 变为 true 并且 $v.name.required 为 false 时,我在输入字段中键入的任何内容都会显示错误。

JS:

0 投票
0 回答
483 浏览

vue.js - Vuelidate - 不要在突变处理程序之外改变 vuex 存储状态

我正在使用 Vuelidate 验证一个 vue 表单,并且在尝试编辑它时出现以下错误:

这是我的表单输入结构:

这是我的状态:

这些是我的 Vuelidate 验证:

我确实在这个组件中使用了 vuex 存储,但它甚至与表单数据本身无关。目前唯一可以消除错误的方法是创建一个副本并将formData其传递给表单,这对我来说没有任何意义。

你有什么建议吗?

0 投票
0 回答
392 浏览

vue.js - 定制一个带有标签和无效消息

在阅读了“form textarea”组件的 BootstrapVue 文档后,我是否正确<b-form-textarea>不支持设置以下属性?

  • invalidFeedback(与例如相反<b-form-input>
  • label

如果这是正确的,是否有任何简单的方法可以添加这些属性?

以下 pug 模板显示文本区域,但不显示标签或无效消息。