Question

我在项目中使用vee-validate的自定义组件没有问题。

但是现在对于“密码确认”输入字段，我无法使其正常工作。

我有一些用于输入字段的自定义组件，例如<base-input-field>。

如果我在自定义组件（ref="password"）中添加<base-input-field ref="password">属性，它将不会引用自定义组件内部的<input>，而是引用封装的<div>包装器<input> html组件。

代码示例：

            <!-- Password -->
            <div class="row">
              <base-text-field
                ref="password"
                name="password"
                type="password"
                :error="isVisible && errors.first('password')"
                v-validate="{
                  required: true,
                  min: 6,
                  max: 30,
                }"
                v-model.trim="password"
                required
              />
            </div>

            <!-- Confirm Password -->
            <div class="row">
              <base-text-field
                name="password_conf"
                type="password"
                :error="isVisible && errors.first('password_conf')"
                v-validate="{
                  required: true,
                  confirmed: 'password',
                }"
                :data-vv-as="password"
                v-model.trim="password_conf"
                required
              />
            </div>

Answer 1

我不知道vee-validate，但是这是一个类似的问题，我的一个类似问题是自定义组件无法直接访问<input>：

使用JS获取对输入的引用：

this.$refs.password.$el.querySelector("input")

您可以将其保存在变量中，然后将其传递给您的组件。同样，我不认识vee-validate。希望它能给您一些想法。

Answer 2

您可以检查您的自定义组件支持哪些事件（可能是@ input / @ change）吗？

如果输入更改时触发了任何事件，则v-validate中有一个选项 data-vv-validate-on ，您可以在其中设置要检查哪个事件的有效性。了解更多here

<base-text-field
            ref="password"
            name="password"
            type="password"
            :error="isVisible && errors.first('password')"
            v-validate="{
              required: true,
              min: 6,
              max: 30,
            }"
            v-model.trim="password"
            data-vv-validate-on="change"
            required
          />

Answer 3

按照this page中的要求进行操作，就可以了：

发出input事件
已通过$_veeValidate在组件中定义了name和value。或者，使用data-vv-name和data-vv-value-path（详细信息here）。

由于您没有在base-text-field中提供代码，因此我无法为您提供任何示例说明它如何工作。

Vue JS VEE使用自定义组件验证密码确认

3 个答案: