Cómo validar formularios en Vue.js

Introducción

La validación de formularios, también conocida como validación de campos de formulario, garantiza que el usuario complete todos los campos obligatorios de un formulario web. Si un campo tiene un valor no válido, se mostrará un mensaje de error y se impedirá el envío del formulario hasta que los valores cumplan con todas las reglas.

La validación basada en plantillas es un tipo de validación de formulario donde las reglas de validación se establecen directamente en los elementos del formulario mediante directivas.

Para implementar validaciones basadas en plantillas en Vue.js, podemos usar VeeValidate. VeeValidate es un complemento para Vue.js que permite validar campos de entrada y mostrar errores.

Aquí hay una imagen animada de lo que construirás en este tutorial:

Al final de este tutorial, tendrá un formulario de registro que utiliza VeeValidate para validar los campos de entrada.

Prerrequisitos

Este tutorial presupone el conocimiento de cadenas y objetos de JavaScript. Es conveniente tener cierta familiaridad con Vue, pero no es obligatorio. Para obtener más información sobre Javascript, consulta la serie Cómo codificar en Javascript.

Nos centraremos en la creación de un único archivo HTML local con referencias a varias bibliotecas alojadas en la nube. Es posible @vue/clicrear un proyecto Vue y utilizar un administrador de paquetes para instalarlo vee-validate; sin embargo, ese enfoque queda fuera del alcance de este tutorial.

Paso 1: Configuración de un proyecto Vue.js con VeeValidate

Necesitará el marco Vue.js y la biblioteca VeeValidate.

Primero, usa tu terminal para crear un nuevo archivo llamado register.html:

nano register.html

Y agrega un código inicial para una página web:

registrarse.html

htmlhead  meta charset="utf-8"  meta name="viewport" content="width=device-width,initial-scale=1.0"  titleVue Template Form Validation/title/headbody  !-- ... --/body/html

Hay una compilación de navegador para Vue.js disponible en cdnjs. Hay una compilación de navegador para VeeValidate disponible en jsdelivr. Agregue ambas al bodyarchivo register.html:

registrarse.html

body  !-- include the Vue.js framework --  script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"/script  !-- include the VeeValidate library --  script src="https://cdn.jsdelivr.net/npm/vee-validate@3.3.8/dist/vee-validate.min.js"/script/body

Estos archivos son proporcionados por CDN (redes de distribución de contenido). No es necesario descargar ni guardar nada localmente.

Ahora tienes una página web lista para usar las últimas versiones estables (al momento de escribir este artículo) de Vue.js y VeeValidate.

Cómo agregar Bootstrap y Font Awesome

Para darle estilo, puedes usar Bootstrap. Para agregar iconografía, también puedes usar Font Awesome.

Las compilaciones de navegador para Bootstrap y Font Awesome están disponibles en BootstrapCDN. Agregue ambas al headarchivo register.html:

registrarse.html

head  meta charset="utf-8"  meta name="viewport" content="width=device-width,initial-scale=1.0"  titleVue Template Form Validation/title  !-- include the Bootsrap framework --  link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"  !-- include Font Awesome --  link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/head

En este punto, tienes Vue, VeeValidate, Bootstrap y Font Awesome. A continuación, crearás el formulario para validar.

Construyendo el marcado del formulario

Este formulario de ejemplo solicitará cinco datos al usuario. Necesitará un name, email, username, passwordy password_confirmation.

Primero, agregue un marcado inicial para el formulario al final bodydel register.htmlarchivo antes de las scriptetiquetas:

registrarse.html

body  div    div      div        h1Sign up once and watch any of our free demos./h1        div          form          !-- ... form fields ... --          /form        /div      /div    /div  /div  !-- ... library script tags ... --/body

Este código establece un espacio vacío formy utiliza algunas utilidades Bootstrap para el diseño y la apariencia.

A continuación, agregue los campos del formulario al form. Comience con el campo para name:

registrarse.html

form  div    label for="name"Your Name/label    div      spanspani aria-hidden="true"/i/span/span      input type="text" name="name" placeholder="Name" /    /div  /div/form

Este código crea un labelpara name, un icono de Font Awesome para fa-usery un inputpara name.

Puede realizar adiciones similares a formlos demás datos email: , username, password, y password_confirmation:

registrarse.html

form  !-- ... name ... --  div    label for="email"Your Email/label    div      spanspani aria-hidden="true"/i/span/span      input type="email" name="email" placeholder="email@example.com" /    /div  /div  div    label for="username"Username/label    div      spanspani aria-hidden="true"/i/span/span      input type="text" name="username" placeholder="Enter your username" /    /div  /div  div    label for="password"Password/label    div      spanspani aria-hidden="true"/i/span/span      input type="password" name="password" placeholder="Enter a password" /    /div  /div  div    label for="password_confirmation"Confirm Password/label    div      spanspani aria-hidden="true"/i/span/span      input type="password" name="password_confirmation" placeholder="Re-type password" /    /div  /div/form

Este código crea labels, íconos de Font Awesome y inputs. Cada entrada tiene un idy único name.

Añade un botón para que el registro complete el form:

registrarse.html

form  !-- ... form fields ... --  div    button type="submit"Register/button  /div/form

Este código crea un botón de envío grande usando estilos Bootstrap.

Puede abrirlo register.htmlen un navegador web para comprobar el progreso de la aplicación.

Paso 2: creación y montaje de una instancia de Vue

A continuación, creará una instancia de Vue y la montará en #signup-form.

Añade una nueva scriptetiqueta al final bodyy define signupForm:

registrarse.html

body  !-- ... form ... --  !-- ... library script tags ... --  script    const signupForm = new Vue({      el: '#signup-form'    });  /script/body

Añadir propiedades al dataobjeto:

registrarse.html

body  !-- ... form ... --  !-- ... library script tags ... --  script    const signupForm = new Vue({      el: '#signup-form',      data: {        name: '',        email: '',        username: '',        password: '',        password_confirmation: ''      }    });  /script/body

Luego, haga referencia a las propiedades con v-modelen cada uno de los campos.

Para el namecampo, agregue lo siguiente:

registrarse.html

input type="text" name="name" placeholder="Name" v-model="name" /

Para el emailcampo, agregue lo siguiente:

registrarse.html

input type="email" name="email" placeholder="email@example.com" v-model="email" /

Para el usernamecampo, agregue lo siguiente:

registrarse.html

input type="text" name="username" placeholder="Enter your username" v-model="username" /

Para el passwordcampo, agregue lo siguiente:

registrarse.html

input type="password" name="password" placeholder="Enter a password" v-model="password" /

Finalmente, para el password_confirmationcampo, agregue lo siguiente:

registrarse.html

input type="password" name="password_confirmation" placeholder="Re-type password" v-model="password_confirmation" /

En este punto, tienes una instancia de Vue con modelos para name, email, username, passwordy password_confirmation.

Paso 3 — Agregar ValidationObserveryValdiationProvider

A continuación, tendrás que registrarte ValidationObservery ValidationProvider.

Puedes agregar ambos a una nueva scriptetiqueta al final de body:

registrarse.html

body  !-- ... form ... --  !-- ... library script tags ... --  script    Vue.component('validation-observer', VeeValidate.ValidationObserver);    Vue.component('validation-provider', VeeValidate.ValidationProvider);  /script  !-- ... vue instance script tag ... --/body

Ahora, puedes usar validation-observerpara encapsular todo el form. Y puedes usar validation-providerpara encapsular los campos:

registrarse.html

validation-observer  form    div      validation-provider        label for="name"Your Name/label        div          spanspani aria-hidden="true"/i/span/span          input type="text" name="name" placeholder="Name" v-model="name" /        /div      /validation-provider    /div    div      validation-provider        label for="email"Your Email/label        div          spanspani aria-hidden="true"/i/span/span          input type="email" name="email" placeholder="email@example.com" v-model="email" /        /div      /validation-provider    /div    div      validation-provider        label for="username"Username/label        div          spanspani aria-hidden="true"/i/span/span          input type="text" name="username" placeholder="Enter your username" v-model="username" /        /div      /validation-provider    /div    div      validation-provider        label for="password"Password/label        div          spanspani aria-hidden="true"/i/span/span          input type="password" name="password" placeholder="Enter a password" v-model="password" /        /div      /validation-provider    /div    div      validation-provider        label for="password_confirmation"Confirm Password/label        div          spanspani aria-hidden="true"/i/span/span          input type="password" name="password_confirmation" placeholder="Re-type password" v-model="password_confirmation" /        /div      /validation-provider    /div    div      button type="submit"Register/button    /div  /form/validation-observer

Ahora tienes un formulario preparado con validation-observery valdiation-provider.

Paso 4: Uso de las reglas de VeeValidate

Una regla VeeValidate establece límites o condiciones sobre lo que se puede ingresar en uno o más campos. Las reglas de validación se verifican cuando se actualiza un registro que contiene campos que requieren validación. Si se infringe la regla, se produce un error que se puede detectar.

Por ejemplo, puedes utilizar el requiredvalidador:

validation-provider rules="required"

Puede pasar múltiples validaciones separadas por un carácter de barra vertical ( |).

Por ejemplo, puedes utilizar los validadores requiredy email:

validation-provider rules="required|email"

Alternativamente, puedes pasar un objeto para mayor flexibilidad:

validation-provider :rules="{ required: true, email: true, regex: /[0-9]+/ }"

Ahora, cada vez que la entrada cambia, el validador ejecutará la lista de validaciones de izquierda a derecha, completando el objeto auxiliar de errores siempre que una entrada falle la validación.

Al momento de escribir este tutorial, VeeValidate tiene 30 reglas para la validación de formularios con la opción de crear sus propias reglas.

Aplicación de reglas

A continuación, debes importar el VeeValidateRulesarchivo .

Puedes agregarlo a una nueva scriptetiqueta al final del bodyarchivo register.html:

registrarse.html

body  !-- ... form ... --  !-- ... library script tags ... --  script src="https://cdn.jsdelivr.net/npm/vee-validate@3.3.8/dist/rules.umd.js"/script  !-- ... vue instance tags ... --/body

Luego, puedes recorrer las reglas para que todas estén disponibles:

registrarse.html

body  !-- ... form ... --  !-- ... library script tags ... --  script    Object.keys(VeeValidateRules).forEach(rule = {      VeeValidate.extend(rule, VeeValidateRules[rule]);    });  /script  !-- ... vue instance tags ... --/body

Y aplicar requiredreglas para todas las entradas:

registrarse.html

validation-provider rules="required"

Aplicación de múltiples reglas

Para email, también aplicará una regla para direcciones de correo electrónico válidas:

registrarse.html

validation-provider rules="required|email"

También passwordse aplicará una regla para una longitud mínima de 6caracteres:

registrarse.html

validation-provider rules="required|min:6"

Ahora, tienes required, email, y minreglas para los campos.

Aplicación de la validación entre campos

Para que sea válido, password_confirmationdeberá coincidir con el valor de password. Para lograrlo, se apoyará en ValidationObserver, que permite password_confirmationconocer password.

Añade el vidal passwordcampo, para que password_confirmedtenga un objetivo:

registrarse.html

validation-provider rules="required|min:6" vid="password"

Añade la confirmedregla al password_confirmationcampo, de modo que password_confirmedcompare su valor con el valor de password:

registrarse.html

validation-provider rules="required|confirmed:password"

Ahora, tienes required, email, min, y confirmedreglas para los campos.

Agregar una regla personalizada

VeeValidate le permite escribir reglas y mensajes de validación personalizados con extendy validate.

Agregue una regla que impida que los usuarios se registren con algunas palabras restringidas. En este ejemplo, restringirá que los usuarios utilicen las palabras admin, password, y administrator:

registrarse.html

body  !-- ... form ... --  !-- ... library script tags ... --  script    // Declare an array of usernames that are invalid.    const restricted_usernames = [      'admin',      'password',      'administrator'    ];    // Extend the custom rule.    VeeValidate.extend('checkuser', {      name: 'Restricted Usernames',      validate: value = {        return restricted_usernames.includes(value.toLowerCase()) ? false : !! value      },      message: 'That {_field_} is unavailable.',    });  /script  !-- ... vue instance tags ... --/body

Añade la regla personalizada al usernamecampo:

registrarse.html

validation-provider rules="required|checkuser"

Ahora, tienes required, email, min, confirmedy checkuserreglas para los campos. Todas las reglas están establecidas y ahora puedes comenzar a mostrar mensajes de error.

Paso 5: Acceso a errores y banderas de VeeValidate

VeeValidate está errorsdisponible. VeeValidate también tiene múltiples indicadores para la información de estado. Puede acceder a ellos mediante Vue v-slot.

También utilizará Vue v-showpara mostrar los mensajes de error de VeeValidate y utilizará la clase Bootstrap invalid-feedbackpara dar estilo a los errores.

Además, utilizará los indicadores VeeValidate para dirty, validy en combinación con las clases invalidde Vue v-bind:classy Bootstrap para diseñar los campos:is-validis-invalid

registrarse.html

validation-observer  form    div      validation-provider rules="required|alpha" v-slot="{ dirty, valid, invalid, errors }"        label for="name"Your Name/label        div          spanspani aria-hidden="true"/i/span/span          input type="text" name="name" placeholder="Name" v-model="name" v-bind:class="{ 'is-valid': dirty  valid, 'is-invalid': dirty  invalid }" /        /div        div v-show="errors"{{ errors[0] }}/div      /validation-provider    /div    div      validation-provider rules="required|email" v-slot="{ dirty, valid, invalid, errors }"        label for="email"Your Email/label        div          spanspani aria-hidden="true"/i/span/span          input type="email" name="email" placeholder="email@example.com" v-model="email" v-bind:class="{ 'is-valid': dirty  valid, 'is-invalid': dirty  invalid }" /        /div        div v-show="errors"{{ errors[0] }}/div      /validation-provider    /div    div      validation-provider rules="required|checkuser" v-slot="{ dirty, valid, invalid, errors }"        label for="username"Username/label        div          spanspani aria-hidden="true"/i/span/span          input type="text" name="username" placeholder="Enter your username" v-model="username" v-bind:class="{ 'is-valid': dirty  valid, 'is-invalid': dirty  invalid }" /        /div        div v-show="errors"{{ errors[0] }}/div      /validation-provider    /div    div      validation-provider rules="required|min:6" vid="password" v-slot="{ dirty, valid, invalid, errors }"        label for="password"Password/label        div          spanspani aria-hidden="true"/i/span/span          input type="password" name="password" placeholder="Enter a password" v-model="password" v-bind:class="{ 'is-valid': dirty  valid, 'is-invalid': dirty  invalid }" /        /div        div v-show="errors"{{ errors[0] }}/div      /validation-provider    /div    div      validation-provider rules="required|confirmed:password" v-slot="{ dirty, valid, invalid, errors }"        label for="password_confirmation"Confirm Password/label        div          spanspani aria-hidden="true"/i/span/span          input type="password" name="password_confirmation" placeholder="Re-type password" v-model="password_confirmation" v-bind:class="{ 'is-valid': dirty  valid, 'is-invalid': dirty  invalid }" /        /div        div v-show="errors"{{ errors[0] }}/div      /validation-provider    /div    div      button type="submit"Register/button    /div  /form/validation-observer

En este punto, tiene acceso a dirty, valid, invalidy errors. Agregó lógica para mostrar mensajes de error como comentarios debajo del campo asociado. Si se interactúa con el campo y este no es válido, se aplicará is-invalidla clase de Bootstrap. Si se interactúa con el campo y este es válido, se aplicará is-validla clase de Bootstrap.

En el siguiente paso, usted se encargará de enviar el formulario.

Paso 6 — Manejo del envío del formulario

VeeValidate también proporciona un invalidindicador ValidationObservery una handleSubmitfunción. Puede acceder a ellos mediante Vue v-slot:

registrarse.html

validation-observer v-slot="{ invalid, handleSubmit }"

Utilice los modificadores de eventos de Vue para capturar el envío de formularios con @submit.prevent. También utilizará VeeValidate handleSubmitpara evitar el envío de formularios hasta que todos los campos sean válidos:

registrarse.html

form @submit.prevent="handleSubmit(onSubmit)"

Esta llamada onSubmitse puede definir como un console.logmensaje:

registrarse.html

script  const signupForm = new Vue({    el: '#signup-form',    data: {      name: '',      email: '',      username: '',      password: '',      password_confirmation: ''    },    methods: {      onSubmit: function() {        console.log('Form has been submitted!');      }    }  });/script

Manténgalo buttonen un disabledestado en el que no se enviará información mientras haya campos invalid:

registrarse.html

button type="submit" v-bind:disabled="invalid"Register/button

En este punto, puedes abrirlo register.htmlen un navegador web e interactuar con el formulario para probar las validaciones.

Conclusión

En este tutorial, ha demostrado cómo validar las entradas de formularios mediante el método basado en plantillas. VeeValidate le ha permitido validar las entradas de formularios con reglas existentes, ampliar reglas nuevas, mostrar errores y gestionar el envío de formularios.

Si desea obtener más información sobre Vue.js, consulte nuestra página de temas de Vue.js para obtener ejercicios y proyectos de programación.