| Tabla de contenidos |
|---|
...
| En construcción |
|---|
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.
...
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:
| Bloque de código |
|---|
npm i vuelidate |
Después tendremos que añadir lo siguiente a nuestro main.js:
| Bloque de código | ||
|---|---|---|
| ||
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate) |
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:
| Nombre | Parámetros | Descripción |
|---|---|---|
required | - | Comprueba que el campo no está vacío, comprobando también arrays vacíos y cadenas de texto que contengan sólo espacios en blanco. |
requiredIf | locator* | como la anterior, pero si se cumple la condición que pasemos como parámetro. |
requiredUnless | locator* | en este caso, es requerido si la condición que le proporcionamos es falsa. |
minLength | longitud mínima | comprueba que el valor tenga la longitud mínima que indiquemos. También funciona con arrays. |
maxLength | longitud máxima | comprueba que el valor tenga una longitud máxima que indiquemos. También funciona con arrays. |
minValue | mínimo | para valores numéricos y fechas, comprueba que el valor es mayor o igual que el que indiquemos. |
maxValue | máximo | para valores numéricos y fechas, comprueba que el valor es menor o igual que el que indiquemos. |
between | mínimo, máximo | comprueba que el valor está entre un mínimo y un máximo que le pasemos. |
alpha | - | acepta sólo letras. |
alphaNum | - | cepta sólo caracteres alfanuméricos. |
numeric | - | acepta sólo números. |
integer | - | acepta enteros positivos y negativos. |
decimal | - | acepta números decimales, tanto positivos como negativos. |
email | - | acepta solo cadenas con el formato de direcciones email. |
ipAddress | - | acepta sólo direcciones IPv4, notación tipo 127.0.0.1. |
macAddress | separator=':' | Acepta direcciones MAC. |
sameAs | locator* | comprueba que es igual que lo que le pasemos. |
url | - | acepta sólo URLs. |
or | validators... | funciona cuando se cumple al menos alguno de los validadores que se le pasan. |
and | validators... | funciona cuando se cumplen todos los validadores que se le pasan. |
not | validator | Pasa cuando se le da un validador que no pasa. Se puede encadenar con otros validadores como not(sameAs("field)). |
withParams | $params, validator | es realmente un modificador de validadores. Añade un objeto $params al validador que se le da. Se puede usar en funciones de validación o incluso en objetos anidados de validación enteros. Útil para crear validadores personalizados. |
*Locator puede ser o bien una propiedad que tengamos definida, o una función. Cuando se da una función, this está enlazado a la instancia del componente, pudiendo utilizar sus propiedades y métodos, incluso en validaciones anidadas.
El bloque de validaciones se hace indicando cada campo a comprobar, que serán variables que tengamos definidas en el data, pasándole los validadores que queramos en forma de objeto, de esta manera:
| 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)
}
} |