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í:

<validation-provider name="El nombre" rules="required|min:2">
  <!--- 
    ...
  --->
</validation-provider>

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.

<validation-provider
  name="El nombre"
  :rules="{required: true, max_value: una_expresión}"
  >
  <!---
    ...
  --->
</validation-provider>

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:

<validation-provider
  name="Cantidad"
  :rules="{required: true, max_value: empleado.totalAhorrado - empleado.totalRetirado}"
  v-slot="{ errors, classes }">
  <input class="input" :class="classes" ref="inputEnfocar" v-model.number="monto"
         placeholder="Cantidad que se retira"
         :disabled="cargando"
         type="number">
  <ErroresValidacion :errores="errors"/>
</validation-provider>

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.