Formulario en Vue con Vuelidate
En este tutorial vamos a ver cómo realizar la validación de un formulario en Vue mediante Vuelidate.
Vuelidate es una librería que sirve para validar datos. Es mucho más cómoda que las comprobaciones hechas a mano y, a diferencia de Vee-Validate, permite validar cualquier tipo de valor, no solo inputs. Esto incluye los valores en el data o en las computadas de los componentes.
Lo primero de todo sería instalar la librería en nuestro proyecto mediante el siguiente comando:
npm install vuelidate –save
Una vez hecho esto nos dirigiremos al archivo main.js, situado dentro de la carpeta src, y escribiremos las siguientes líneas:
import Vuelidate from ‘vuelidate’;
Vue.use(Vuelidate);
Con esto importamos la dependencia e indicamos a Vue que tiene que usarla.
Creamos el componente y nuestro formulario con los campos que queramos. En mi caso he puesto nombre, edad, email, contraseña y confirmación de contraseña.
<form>
<div id=»titulo»>
<h1>Validación de un formulario en Vue</h1>
</div>
<hr/>
<div id=»campos»>
<div>
<label>Nombre: </label>
<input type=»text» id=»nombre»/>
</div>
<div>
<label>Edad: </label>
<input type=»number» id=»edad»/>
</div>
<div>
<label>Email: </label>
<input type=»text» id=»email»/>
</div>
<div>
<label>Contraseña: </label>
<input type=»password» id=»contraseña»/>
</div>
<div>
<label>Confirmar contraseña: </label>
<input type=»password» id=»confirmarContraseña»/>
</div>
<button>Validar</button>
</div>
</form>
Lo siguiente sería declarar las variables en el data y enlazarlas a los inputs mediante v-model:
data(){
return{
nombre: «»,
edad: «»,
email: «»,
contraseña: «»,
confirmarContraseña: «»,
enviado: false
}
}
Por ejemplo, con el nombre se haría de esta forma:
<div>
<label>Nombre: </label>
<input type=»text» id=»nombre» v-model=»nombre»/>
</div>
Ahora tendríamos que importar al principio del script los tipos de validaciones que vayamos a realizar:
import { required, email, minLength, sameAs } from ‘vuelidate/lib/validators’;
Todas las comprobaciones posibles se encuentran en la ruta ‘node_modules/vuelidate/lib/validators’.
Ahora viene la parte de establecer las propiedades que hay que validar de cada variable. Lo haremos con el objeto validations:
validations: {
nombre: { required },
edad: { required },
email: { required, email },
contraseña: { required, minLength: minLength(6) },
confirmarContraseña: { required, sameAsContraseña: sameAs(«contraseña») }
},
Con esto queremos que el usuario rellene todos los campos, que email tenga un formato correcto, que contraseña tenga como mínimo 6 caracteres y que confirmarContraseña sea igual que contraseña.
También vamos a añadir unos mensajes que se mostrarán cuando no se cumpla alguna de las validaciones. Para ello, utilizaremos el objeto $v y preguntaremos en un div si el usuario ha pulsado el botón y si la comprobación es correcta:
<div v-if=»enviado && !$v.nombre.required» class=»mensajeError»>
Debe escribir un nombre.
</div>
La variable enviado indica cuándo el usuario ha pulsado el botón y se pone a true. Sin ella, el mensaje se mostraría desde un primer momento. En este caso preguntamos si el usuario ha mandado los datos y si la validación required del nombre se cumple. En caso contrario, se muestra el mensaje.
Por último, asignamos un evento al botón que llame a un método en el que preguntemos al objeto $v si las validaciones se cumplen:
validar(){
this.enviado=true;
if (this.$v.$invalid) {
return;
}
console.log(«¡Formulario válido!»);
}
Si el formulario es inválido, sale del método y se muestran los mensajes de error. Si no, imprime por consola el mensaje “¡Formulario válido!”.
El código final sería este:
<template>
<div>
<form v-on:submit.prevent=»validar»>
<div id=»titulo»>
<h1>Validación de un formulario en Vue</h1>
</div>
<hr/>
<div id=»campos»>
<div>
<label>Nombre: </label>
<input type=»text» id=»nombre» v-model=»nombre»/>
<div v-if=»enviado && !$v.nombre.required» class=»mensajeError»>
Debe escribir un nombre.
</div>
</div>
<div>
<label>Edad: </label>
<input type=»number» id=»edad» v-model=»edad»/>
<div v-if=»enviado && !$v.edad.required» class=»mensajeError»>
Debe escribir una edad.
</div>
</div>
<div>
<label>Email: </label>
<input type=»text» id=»email» v-model=»email»/>
<div v-if=»enviado && !$v.email.required» class=»mensajeError»>
Debe escribir un email.
</div>
<div v-if=»enviado && !$v.email.email» class=»mensajeError»>
Formato incorrecto.
</div>
</div>
<div>
<label>Contraseña: </label>
<input type=»password» id=»contraseña» v-model=»contraseña»/>
<div v-if=»enviado && !$v.contraseña.required» class=»mensajeError»>
Debe escribir una contraseña.
</div>
<div v-if=»enviado && !$v.contraseña.minLength» class=»mensajeError»>
La contraseña debe contener mínimo 6 caracteres.
</div>
</div>
<div>
<label>Confirmar contraseña: </label>
<input type=»password» id=»confirmarContraseña» v-model=»confirmarContraseña»/>
<div v-if=»enviado && !$v.confirmarContraseña.required» class=»mensajeError»>
Debe escribir la confirmación de la contraseña.
</div>
<div v-if=»enviado && !$v.confirmarContraseña.sameAsContraseña» class=»mensajeError»>
Las contraseñas deben coincidir.
</div>
</div>
<button>Validar</button>
</div>
</form>
</div>
</template>
<script>
import { required, email, minLength, sameAs } from ‘vuelidate/lib/validators’;
export default {
name: «Formulario»,
data(){
return{
nombre: «»,
edad: «»,
email: «»,
contraseña: «»,
confirmarContraseña: «»,
enviado: false
}
},
validations: {
nombre: { required },
edad: { required },
email: { required, email },
contraseña: { required, minLength: minLength(6) },
confirmarContraseña: { required, sameAsContraseña: sameAs(«contraseña») }
},
methods: {
validar(){
this.enviado=true;
// Si el formulario es inválido, no continúa.
if (this.$v.$invalid) {
return;
}
console.log(«Formulario válido.»);
}
}
}
</script>
<style scoped>
form{
width: fit-content;
padding-top: 20px;
border: 2px solid black;
box-shadow: 6px 6px 12px 1px;
border-radius: 20px;
margin: 0 auto;
}
#titulo{
padding: 0px 30px 0px 30px;
}
#campos{
padding: 50px;
text-align: left;
margin-left: 70px;
}
button{
margin-left: 35%;
margin-top: 20px;
}
input{
margin: 10px;
}
.mensajeError{
color:rgb(230, 0, 0);
}
</style>
Autor/a: María del Mar Carrión García
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código utilizado: https://github.com/MariMar9/FormularioVuelidate