...
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.
...
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:
| Bloque de código | ||
|---|---|---|
| ||
const esGuille = (value) => value == "Guille"; |
Utilizamos esta notación por mantenerlo simple, pero bien podríamos poner un bloque de código más complejo con { ... } y return, o utilizar function.
Para añadir parámetros, haríamos una función que encapsule a una como la que hemos visto, de esta forma:
| Bloque de código | ||
|---|---|---|
| ||
const esGuilleUOtraCosa = (param) =>
(value) => value == "Guille" || value == param;
// ...
validations: {
myField: {
guilleOWilly: esGuilleUOtraCosa('Willy')
}
} |
En este caso, podríamos añadir varios parámetros sin problemas,