Validar formularios frontend con VueJS

Hola a todos, en todos los formularios, como inicio de sesión, registro o verificación de información, etc. En Frontend necesitamos validar los datos antes de que se procesen en el backend y se guarden en la base de datos.

Verificar datos en el formulario Frontend usando VueJS es una forma de reducir en gran medida el tiempo en comparación con cuando verifica los datos en el backend.

En este ejemplo, validaremos los datos de los componentes más básicos, que son necesarios para ingresar el cuadro de texto, el correo electrónico, el número y el valor del número total.

Validación de formularios frontend con VueJS

  1. VueJS y Bootstrap
    Si no ha instalado VueJS y bootstrap, llame a la biblioteca como se muestra a continuación:

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>

  1. Las etiquetas del formulario HTML son las siguientes:
    – error: se muestra si hay errores. longitud > 0

– Cómo declarar el modelo v se puede utilizar de dos maneras (por ejemplo, en la posición número 1)

  <div class=”container”>
<h1>Validation form with VueJS</h1>
<form action=”/” method=”POST” @submit=”checkForm” novalidate=”true” id=”app”>
<div v-if=”errors.length”>
<p><b>Please correct the following errors: </b></p>
<div class=”flash-message” v-for=”error in errors”>
<p class=”alert alert-danger”>{{ error }}</p>
</div>
</div>
<div class=”form-group”>
<div class=”row”>
<label for=”name” class=”col-md-2 text-right”>Name:</label>
<input type=”text” name=”name” v-model=”name” class=”form-control col-md-5″ />
</div>
</div>
<div class=”form-group”>
<div class=”row”>
<label for=”email” class=”col-md-2 text-right”>Email</label>
<input type=”email” name=”email” v-model=”email” class=”form-control col-md-5″ />
</div>
</div>
<div class=”form-group”>
<div class=”row”>
<label for=”number1″ class=”col-md-2 text-right”>Number 1</label>
<!– <input type=”number” v-model=”number1″ min=”0″/> v-model or v-model.number –>
<input type=”number” v-model.number=”number1″ min=”0″ class=”form-control col-md-5″ />
</div>
</div>
<div class=”form-group”>
<div class=”row”>
<label for=”number2″ class=”col-md-2 text-right”>Number 2</label>
<input type=”number” v-model=”number2″ min=”0″ class=”form-control col-md-5″ />
</div>
</div>
<div class=”form-group”>
<div class=”row”>
<div class=”col-md-2 text-right”>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</div>
</div>
</div>
</form>
</div>

  1. Script para manejar la validación

– el: ‘aplicación’ es el ID de envío del formulario

– total: la función de procesamiento calcula la suma

– checkForm: la función checkForm se ejecuta antes de enviar el formulario.

– validEmail: Verifique que el valor ingresado esté en el formato de correo electrónico correcto

const app = new Vue({
el: ‘#app’,
data: {
errors: [],
name: null,
email: null,
number1: null,
number2: null
},
computed: {
total: function() {
return Number(this.number1) + Number(this.number2);
}
},
methods: {
checkForm: function(e) {
this.errors = [];
if (!this.name) {
this.errors.push(‘Name required.’);
}
if (!this.email) {
this.errors.push(‘Email is required.’);
} else if (!this.validEmail(this.email)) {
this.errors.push(‘Email is not validate’);
}
if (this.number < 0) {
this.errors.push(‘Number must unsinged’);
}
if (this.total != 20) {
this.errors.push(‘Total number must be 20’);
}
if (!this.errors.length) return true;
e.preventDefault();

},
validEmail:function(email) {
var re = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
}
});

Deja un comentario