Validation Vue js vee使用自定义组件验证密码确认

我在项目中使用

vee-validate

，自定义组件没有问题

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

我为输入字段定制了一些组件，比如

如果在自定义组件（

）中添加

ref=“password”

属性，它将不会引用自定义组件中的

，而是引用封装

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>

---

我不知道

vee validate

，但这里有一个想法来自我遇到的一个类似问题，即定制组件无法直接访问

：

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

this.$refs.password.$el.querySelector（“输入”）

---

你可以把它保存在一个变量中，然后把它传递给你的组件。同样，我不知道如何验证。希望它能给你一些想法。

你能检查一下自定义组件（可能是@input/@change）支持哪些事件吗

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

---

遵循中的要求，您应该可以：

• 组件中的值更改时发出

  input

  事件
• 通过在组件中定义

  名称

  和

  值

  。或者，使用

  数据vv名称

  和

  数据vv值路径

  （详细信息）

---

由于您没有在

基本文本字段中提供代码

，因此我无法进一步向您说明它应该如何为您工作。

我将尝试！谢谢这个问题的答案将对你有所帮助。

<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
          />