我正在尝试使用 vee validate 使用此代码验证密码。
<div>
<input type="password"
placeholder="Password"
v-model="password"
v-validate="'required|min:6|max:35|confirmed'"
name="password" />
</div>
<div>
<span>{{ errors.first('password') }}</span>
</div>
<div>
<input type="password"
placeholder="Confirm password"
v-model="confirmPassword"
v-validate="'required|target:password'"
name="confirm_password" />
</div>
<div>
<span>{{ errors.first('confirm_password') }}</span>
</div>
但它总是说密码确认不匹配。我的代码出了什么问题？
您输入的密码必须有ref="password"- 这就是 vee-validate 找到目标的方式：
<input v-validate="'required'" ... ref="password">（谢谢，Ryley https://stackoverflow.com/users/312208/ryley).
已确认：{target} - 输入必须与目标具有相同的值
输入，由 {target} 指定为目标字段的名称。
另外，您的 Vee Validate 语法有错误，请更改target: to confirmed:
v-validate="'required|target:password'"
应该
v-validate="'required|confirmed:password'"
看一下下面的基本示例，它将检查两件事：
- 第二个输入框有输入值吗？
- 如果是，第二输入值是否与第一输入值匹配？
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
body {
background: #20262E;
padding: 15px;
font-family: Helvetica;
}
#app {
width: 60%;
background: #fff;
border-radius: 10px;
padding: 15px;
margin: auto;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.js"></script>
<script>
Vue.use(VeeValidate);
</script>
<div id="app">
<form id="demo">
<!-- INPUTS -->
<div class="input-group">
<h4 id="header"> Enter Password</h4>
<div class="input-fields">
<input v-validate="'required'" name="password" type="password" placeholder="Password" ref="password">
<input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" placeholder="Password, Again" data-vv-as="password">
</div>
</div>
<!-- ERRORS -->
<div class="alert alert-danger" v-show="errors.any()">
<div v-if="errors.has('password')">
{{ errors.first('password') }}
</div>
<div v-if="errors.has('password_confirmation')">
{{ errors.first('password_confirmation') }}
</div>
</div>
</form>
</div>
进一步阅读：https://baianat.github.io/vee-validate/guide/rules.html#confirmed https://baianat.github.io/vee-validate/guide/rules.html#confirmed
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
