| 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.
...
Cuando en un formulario hacemos submit, el comportamiento por defecto es que se haga una redirección mandando los datos del formulario, pero nosotros podemos mandar o no (podemos guardar datos en vuex como paso intermedio, por ejemplo) los datos a nuestro backend, al servicio REST, y navegar utilizando Vue Router. Para evitar que se haga esa acción cuando hacemos submit, podemos capturar el evento @submit.prevent, añadiendo la funcionalidad que queramos: comprobación de los campos, envío de datos, navegación...
...
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. Hay que tener en cuenta que el contexto de las funciones flecha y las normales son diferentes, para referenciar al componente en el que nos encontramos, sólo utilizando function() {...} podremos hacerlo utilizando this.
Para añadir parámetros, haríamos una función que encapsule a una como la que hemos visto, de esta forma:
...
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:
| Bloque de código | ||
|---|---|---|
| ||
import { helpers } from 'vuelidate/lib/validators' |
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:
| Bloque de código | ||
|---|---|---|
| ||
import { helpers } from 'vuelidate/lib/validators' const alpha = helpers.regex('alpha', /^[a-zA-Z]*$/) |
Para más detalles, podemos consultar la documentación oficial de Vuelidate.