En este post veremos cómo definir reglas dinámicas en Vee Validate (un validador de formularios de Vue).

Es decir, definir el valor máximo, valor mínimo, etcétera de forma dinámica, esto es, a través de una variable o expresión.

Nota: esto aplica para la versión 3 de Vee Validate.

Reglas de VeeValidate

Normalmente definimos las reglas algo así:

Pero las reglas son estáticas, es decir, en el ejemplo presentado no podríamos cambiar el valor mínimo como el resultado de una expresión o a través de una variable.

Agregando reglas dinámicas

Para agregar reglas dinámicas en Vue para validar formularios usando VeeValidate simplemente definimos las reglas como un objeto cuya clave es el nombre de la regla y el valor es el valor de la regla.

En este caso indicamos que el dato es requerido (con true) pero esa variable se podría cambiar por una dentro de nuestro componente.

Como ejemplo puedes ver lo siguiente:

Si te fijas puedes ver que para max_value estoy colocando el valor que resulta de empleado.totalAhorrado - empleado.totalRetirado; esto es para no permitir que se retire una cantidad mayor al monto disponible.

Así como se pudo para el valor máximo, se puede para las demás reglas; y como te dije, puede ser el resultado de cualquier expresión o una variable dentro de tu componente.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

Relacionado:  Select y JavaScript: agregar, limpiar, obtener y escuchar cambios del elemento HTML

Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 608 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: