Para la validación de formularios, podemos implementar las comprobaciones directamente para casos simples, pero para casos más complejos disponemos de la librería Vuelidate (para todos los detalles, podemos consultar su documentación oficial).

Uso de @submit.prevent

Cuando en un formulario hacemos submit, el comportamiento por defecto es que se haga una redirección mandando los datos del formulario, pero lo más probable es que no queramos hacer eso, sino tratar los datos y hacer una llamada a una api. Para evitar esa redirección por defecto 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...

<form @submit.prevent="checkSubmit">
  ...
</form>

methods: {
    checkSubmit() {
      ...
      ...
    }

Importar Vuelidate

Para importar Vuelidate en nuestros componentes, lo haremos así:

import useVuelidate from '@vuelidate/core';

Y dentro del export default defineComponent({ ... }), habrá que incluir un campo setup con lo siguiente:

  setup() {
    return { v$: useVuelidate() };
  },

Validaciones

Estableceremos las diferentes validaciones que queremos que se hagan sobre variables que estén incluidas en el data del componente, especificándolas en un campo validations dentro del export default defineComponent({ ... }), así:

validations: {
    nombre: {
      required: required$,
      minLength: minLength$(4),
      maxLength: maxLength$(500),
    },},

En este caso, "nombre" es la variable que estaría definida dentro del data del componente, y required, minLength y maxLength son las validaciones que se le aplican.

Los validadores son las comprobaciones que se harán sobre las variables que especifiquemos, y por defecto Vuelidate proporciona los siguientes:

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

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)
    }
}

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: 

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

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. 

Helpers

Para añadir algunas funciones a nuestros validadores personalizados, Vuelidate ofrece una serie de helpers, que tendremos que importar:

import { helpers } from 'vuelidate/lib/validators'

Y la lista de helpers que ofrece es la siguiente:

Un ejemplo de validador que hace uso de expresiones regulares sería el siguiente:

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.