Vue js vee使用自定义组件验证密码确认
Vue js vee使用自定义组件验证密码确认
提问于 2019-05-29 07:01:59
我在我的项目中使用vee-validate和自定义组件，没有任何问题。
但是现在，对于密码确认输入字段，我无法使其正常工作。
我有输入字段的自定义组件，有些人认为像<base-input-field>。
如果我在自定义组件(<base-input-field ref="password">)中添加ref="password"属性，它将不会引用自定义组件中的<input>，而是引用封装<input> html组件的<div>包装器。
代码示例：
<!-- 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>回答 3
Stack Overflow用户
发布于 2019-05-29 09:55:35
我不知道vee-validate，但这是我遇到的一个类似问题的想法，因为自定义组件无法直接访问<input>：
使用JS获取对输入的引用：
this.$refs.password.$el.querySelector("input")
我想你可以把它保存在一个变量中，然后把它传递给你的组件。再说一次，我不认识vee-validate。希望它能给你一些启发。
Stack Overflow用户
发布于 2019-05-29 15:23:20
你能检查你的自定义组件支持哪些事件(可能是@input/@change)吗？
如果在更改输入时触发了任何事件，则在v- 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
/>Stack Overflow用户
发布于 2019-05-30 05:11:51
遵循this page中的要求，您就应该没问题：
- 在组件中的值发生更改时发出
input事件 - 通过$_veeValidate在组件中定义了
name和value。或者，使用data-vv-name和data-vv-value-path(详细信息here).
因为您没有提供base-text-field中的代码，所以我不能给您更多的例子来说明它应该如何为您工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56351074
复制相关文章
相似问题
腾讯云开发者
