问题标签 [vuelidate]

我使用 Bootstrap-Vue 构建了以下表单，其中应用了一些 Vuelidation 代码。

但是目前，当页面加载时，我会立即得到反馈，这可能会让用户感到不安。相反，我希望在用户完成输入/选择时显示错误。

我曾尝试使用 @blur="$v.form.dobYear.$touch()" 但它似乎根本不起作用。我究竟做错了什么？

这是我的验证在我的脚本中的样子的截图：

我有一个相当大的表单，我将其发布到 API 后端。该表单有大约 17-20 个字段，具体取决于复选框的状态。

我的计划是，在用户填写表格后，我将使用 Vuelidate 对其进行验证，然后显示数据摘要，让用户可以查看他们的数据。在用户查看数据并认为正确后，它将表单发布到后端 API。

为此，我计划使用 Vuex 来存储表单对象，并使用存储来显示表单中的字段以及摘要页面上的字段。

这是将表单对象存储在 Vuex 中的好方法吗？如果是这样，我在 store.js 中在哪里定义验证规则？非常感谢您的反馈！

我正在使用 Bootstrap-Vue 表单输入，并使用 Vuelidate 进行验证。目前在用户输入时，我得到轮廓颜色（红色或绿色）和一个复选框或一个十字，具体取决于有效或无效。我现在想更改此行为，使其仅在模糊时显示。我在输入中添加了以下代码行，但是发生了相同的行为：

这是我输入的完整代码，请您解释一下我哪里出错了，或者如何正确处理这个问题？

我似乎无法在 Vuelidate 的文档中找到如何验证整个模型（包括子组件）。验证父组件和每个子组件都不是问题，但是我找不到使用validations父组件中的结构来验证子组件的方法。

我假设必须将某些东西作为道具传递给子组件。

我在 SO 上发现了一个类似的问题，但答案似乎并不完整，不幸的是它没有帮助。

父组件：

父组件模板（为简洁起见省略部分代码）

子组件模板（为简洁起见省略部分代码）

子组件（带有子组件内的验证逻辑）

我们已经在使用Vuelidate - 一个 Vue.js 模型验证库来验证“编辑小部件配置”表单中“小部件”的“配置”。

现在我们还需要确定“配置”对象（例如来自 JSON）是否有效，而“配置”对象没有像表单一样位于 Vue 对象中，并且希望重用我们已经使用的验证逻辑为表格而写。

我可以使用 vuelidate 来验证这样的非 vue“配置”Javascript 对象吗？如果是这样，怎么做？

这个问题来自forum.vuejs.org 的帖子，其中“wube”说：

我认为您错过了 Vuelidate 的目的。这只是一个基于模型的验证库。它的目标是为您提供数据是否有效的信息。我认为您可能会感到困惑，因为他们文档中的所有示例都是基于表单的，但是 Validate 可用于验证任何类型的数据，而不仅仅是表单数据（与 Parsley 43 等专为表单验证而设计的库相反） .

确切地说。我正在尝试验证“任何类型的数据”。我怎样才能做到这一点？

那么如何创建$v来自：

我有一个对象数组，例如显示 2 个字段时间和记录的对象：

当我点击添加按钮时，我有一个函数可以在之后添加这些字段：

我想使用 Vuelidate 检查每一个是否存在。验证必须是必填字段，数字，时间：介于 0 和 1( float 0.1 , 0.2, ..) 之间，记录：介于 0 和 100 之间，

感谢您的帮助

我在 vuelidate 中有一个导致无限循环的问题。这是我的项目的简要过程。我有一个datatable，我用Firebase OnSnapShot函数对表格进行分页。该表具有操作列，单击时将显示模式。当我更新来自表的值时，vuelidateisUnique函数会触发一个无限循环。

PS我在查看模态之前分离监听器

无限循环的输出：

这是我加载的函数datatable：

这是我点击动作时的功能（模态）：

这是我的isUnique功能：

这是我的 checkUnique 函数：

希望这是一个新手问题。我正在使用 Vuelidate 验证我的表单并且表单验证工作正常，当单击“发送电子邮件”按钮时。但是成功时，系统没有向我显示成功消息，而是显示所有表单控件都有错误（这是因为我已将名称、电子邮件、消息控件绑定到它们对应的空数据元素）。我错过了什么？我该如何解决这个问题？

联系.vue

我是 vuelidate 的新手，在按照他们文档中的一些教程示例进行操作时，我注意到我的代码中的错误甚至在输入任何内容之前就显示出来了，并且显示了错误的错误，例如在“必需”之前显示“minlenght”相关的错误消息字段”错误消息。

这是我关注的 vuelidate 文档的链接，这是我关注的官方 vue 材料表单示例的链接。

当我使用官方 vuelidate 示例时，错误消息显示在蝙蝠右侧，而不是仅在我键入内容后才显示：

这是我试图实现验证的单字段表单：

我正在尝试创建一个自定义 Vue 验证器。我已经查看了他们的文档https://vuelidate.netlify.com/#custom-validators，以及一个非常有用的教程https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate /。

但是，我仍然没有看到如何执行以下操作的明确示例：

我有两个日期选择器输入字段，一个开始日期和结束日期。我希望能够创建一个验证器，它可以

1. 同时检查两个日期以确保结束日期不早于开始日期
2. 有一个基于此的验证消息（又名：我们不希望一个字段带有“开始日期不能早于结束日期”而另一个字段带有“结束日期不能早于开始日期”）

这种类型的功能（或在不同的功能中使用其他字段值）基本上是核心sameAs验证器（见下文）所具有的：

我试图模仿这个，但它不起作用......

它甚至没有记录我的 console.log。这是调用它的代码

验证：