Solución:
Su entrada de contraseña debe tener ref="password"
– así es como vee-validate encuentra el objetivo:
<input v-validate="'required'" ... ref="password">
(Gracias, Ryley).
confirmado: {target}: la entrada debe tener el mismo valor que la entrada de destino, especificado por {target} como el nombre del campo de destino.
Además, hay un error con su sintaxis Vee Validate, cambie target:
para confirmed:
v-validate="'required|target:password'"
debiera ser
v-validate="'required|confirmed:password'"
Eche un vistazo al ejemplo básico a continuación, verificará dos cosas:
- ¿El segundo campo de entrada tiene algún valor de entrada?
- En caso afirmativo, ¿el segundo valor de entrada coincide con el primer valor de entrada?
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]/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>
Más información: https://baianat.github.io/vee-validate/guide/rules.html#confirmed
El siguiente código funciona para mí: https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields
<template>
<ValidationObserver>
<ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
<input type="password" v-model="password" />
<span>{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
<input type="password" v-model="confirmation" />
<span>{{ errors[0] }}</span>
</ValidationProvider>
</ValidationObserver>
</template>
<script>
import { extend } from 'vee-validate';
extend('password', {
params: ['target'],
validate(value, { target }) {
return value === target;
},
message: 'Password confirmation does not match'
});
export default {
data: () => ({
password: '',
confirmation: ''
})
};
</script>