| Tabla de contenidos |
|---|
...
Uso de @submit.prevent
Para hacer la validación de formularios en Vue, hay algunos aspectos que debemos tener en cuenta, y disponemos del paquete Vuelidate con algunas funcionalidades que nos sirven para ello. Veamos cómo lo haríamos.
...
La forma de hacer las comprobaciones será a través del método que definamos en submit.prevent, utilizando variables y estilos y renderizaciones condicionales para mostrar los errores. En el apartado de Vuelidate veremos que nos facilita esta tarea.
Required en componentes Primevue
Algunos componentes Primevue permiten utilizar required e implementan un mensaje de error en caso de que se intente hacer submit y no se haya rellenado el campo, pero no lo utilizaremos, pues, aparte de que no está incluido en todos los componentes, nos ofrece menos flexibilidad.
Paquete Vuelidate
Podemos consultar la documentación oficial de Vuelidate para ver todos los detalles, en este apartado indicaremos el uso básico y más común que haremos de este paquete.
Vuelidate nos añade la posibilidad de definir un bloque validations dentro del export default de nuestros componentes Vue, en el que indicar las variables que se quieren comprobar y las comprobaciones que hacer sobre ellas. Además, también nos proporciona una serie de propiedades calculadas para comprobar los errores que hay y formar nuestra interfaz en consecuencia.
Instalación
Para instalar Vuelidate, primero tendremos que añadirlo a las dependencias de nuestro proyecto ejecutando:
...
Con esto ya podremos usar el bloque validations en nuestros componentes. En ellos solo tendremos que importar los validadores que que vayamos a utilizar.
Validaciones
Los validadores son las comprobaciones que se harán sobre las variables que especifiquemos, y por defecto Vuelidate proporciona los siguientes:
...
| Bloque de código | ||
|---|---|---|
| ||
import { required, requiredUnless, requiredIf, minLength, between } from "vuelidate/lib/validators"
...
validations: {
field: {
required: requiredUnless('isOptional')
},
nested: {
required: requiredIf(function (nestedModel) {
return !this.isOptional && nestedModel.someFlag
})
},
name: {
required,
minLength: minLength(4)
},
age: {
between: between(20, 30)
}
} |
Validaciones personalizadas
Para hacer un validador personalizamos necesitamos una función que devuelva true o false, comprobando una condición. Nos los podemos definir como constantes en nuestro componente, antes del export default, o en archivos javascript externos si se van a reutilizar en diferentes componentes. Lo podemos hacer así, siendo value el valor de la variable a la que se enlzace el validador:
...
En este caso, podríamos añadir varios parámetros sin problemas.
Helpers
Para añadir algunas funciones a nuestros validadores personalizados, Vuelidate ofrece una serie de helpers, que tendremos que importar:
...
Y la lista de helpers que ofrece es la siguiente:
| Helper | Descripción |
|---|---|
withParams | Permite añadir metadatos $params a tu función de validación. |
req | Versión mínima de required. Se utiliza para hacer que tu validador acepte campos opcionales. |
ref | Helper locator, permite referenciar a otros campos en el modelo. |
len | Obtiene la longitud de lo que se le pase, ya sea un array, string, o número de claves en un objeto. |
regex | Para creación de validadores con expresiones regulares. |
Un ejemplo de validador que hace uso de expresiones regulares sería el siguiente:
...