JavaScript es un lenguaje de programación de secuencias de comandos que también ayuda a validar la información del usuario. ¿Alguna vez has oído hablar de la validación de formularios? Aquí entra en escena JavaScript, el lenguaje de secuencias de comandos que se utiliza para validaciones y verificaciones. Para profundizar en este tema, entendamos con ejemplos.
Validación de formulario: La validación de formulario es validar los valores que ingresa el usuario final durante el envío de un formulario. Para validar un formulario, Regular Expression juega un papel vital. Veamos qué significa Expresión regular.
Expresión regular: una expresión regular es un objeto que describe un patrón de caracteres. Las expresiones regulares se utilizan para realizar funciones de coincidencia de patrones y búsqueda y reemplazo en el texto. Entonces, en esta área, JavaScript juega un papel importante en la validación de los valores. Para tener más idea sobre la terminología, veamos un ejemplo.
Comprendamos cómo validar formularios usando EXPRESIÓN REGULAR en JavaScript a través de ejemplos.
Ejemplo 1: Validación de formulario (validación de un correo electrónico)
Suponga un formulario de registro que contenga los detalles básicos de los usuarios finales, como nombre, número de teléfono, ID de correo electrónico y dirección. Cuando el usuario ingresa la identificación del correo electrónico sin el nombre de dominio y el símbolo «@», el formulario arroja un error que dice «nombre de dominio no incluido». ¿Alguna vez te has preguntado cómo sucede esto? Esto sucede debido a las expresiones regulares en JavaScript. La expresión regular se puede definir como un tope (coincidencia de patrón) para los valores que no son correctos, es decir, «que indica un error mientras el usuario final ingresa los detalles incorrectos en lugar de la expresión regular dada». Algunos de los caracteres utilizados son “[abc],[^abc],\w,\W,\S”. Por lo tanto, la validación de la dirección de correo electrónico ingresada por el usuario final se realiza mediante JavaScript.
index.html
<!DOCTYPE html>
<html>
<head>
<title>creating mailing system</title>
<style>
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
<script type="text/javascript">
function validate() {
var user = document.getElementById("e").value;
var user2 = document.getElementById("e");
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (re.test(user)) {
alert("done");
return true;
}
else {
user2.style.border = "red solid 3px";
return false;
}
}
</script>
</head>
<body bgcolor="cyan">
<center>
<h1>Email Registration</h1>
<form>
<fieldset style="width:300px">
<legend>Registation Form</legend>
<table>
<tr>
<input type="text"
placeholder="firstname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="text"
placeholder="lastname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="email"
placeholder="username@gmail.com" id="e">
</tr>
<br><br>
<tr>
<input type="password" placeholder="password">
</tr>
<br><br>
<tr>
<input type="password" placeholder="confirm">
</tr>
<br><br>
<tr>
<input type="text" placeholder="contact">
</tr>
<br><br>
<tr>
<label>Gender:</label>
<select id="gender">
<option value="male">male</option>
<option value="female">female</option>
<option value="others">others</option>
</select>
</tr>
<br><br>
<tr><input type="submit"
onclick="validate()" value="create">
</tr>
</table>
</fieldset>
</form>
</center>
</body>
</html>
Producción:
Esta imagen dice que el usuario ingresa una dirección de correo electrónico perfecta, por lo que se acepta el formulario y se realiza el registro. Cuando una persona ingresa el correo electrónico incorrecto, el cuadro de texto del correo electrónico se resalta con un borde de color rojo, lo que indica que se trata de un error.
Email inválido
Correo electrónico correcto y el formulario se envía
Ejemplo 2: Validación de formulario (validación de número de teléfono)
Supongamos asumir el mismo formulario de registro. Alguna vez se preguntó por qué el número debe comenzar solo con 6, 7, 8, 9 y no con los números restantes. Aquí, también la imagen es reproducida por Expresión regular que ayuda a validar el número de móvil correcto. Restringir a los usuarios para que ingresen solo 10 dígitos donde el primer dígito debe ser de los números «6,7,8,9» y el resto todos los dígitos pueden ser de cualquier número del 0 al 9 se hace únicamente mediante expresiones regulares «[^6-9] [,0-9]” que ayudan a validar los formularios si la información ingresada es relevante para el patrón especificado.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
<script type="text/javascript">
function validate() {
var user = document.getElementById("c").value;
var user2 = document.getElementById("c");
var re = /^[7-9][0-9]{9}$/;
if (re.test(user)) {
alert("done");
return true;
}
else {
user2.style.border = "red solid 3px";
return false;
}
}
</script>
</head>
<body bgcolor="cyan">
<center>
<h1>Email Registration</h1>
<form>
<fieldset style="width:300px">
<legend>Registation Form</legend>
<table>
<tr>
<input type="text"
placeholder="firstname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="text"
placeholder="lastname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="email"
placeholder="username@gmail.com">
</tr>
<br><br>
<tr>
<input type="password"
placeholder="password">
</tr>
<br><br>
<tr>
<input type="password"
placeholder="confirm">
</tr>
<br><br>
<tr>
<input type="text"
placeholder="contact" id="c">
</tr>
<br><br>
<tr>
<label>Gender:</label>
<select id="gender">
<option value="male">male</option>
<option value="female">female</option>
<option value="others">others</option>
</select>
</tr>
<br><br>
<tr>
<input type="submit"
onclick="validate()" value="create">
</tr>
</table>
</fieldset>
</form>
</center>
</body>
</html>
Producción:
Esta imagen dice que el usuario ingresa un número de teléfono perfecto, por lo que se acepta el formulario y se realiza el registro. Al ingresar el número de teléfono incorrecto, el cuadro de texto del número de teléfono se resalta con un borde de color rojo, lo que indica que es un error.
Corrija el contacto y el correo electrónico para que se envíe el formulario
Correo electrónico y contacto no válidos
Por lo tanto, la validación de un formulario se puede hacer a través de JavaScript en las páginas web. Debe vincularse con HTML, que es un lenguaje de marcado. Aunque muchos otros lenguajes entraron en escena para las validaciones, JavaScript es la forma básica de aprender a comprender las validaciones realizadas en las páginas web.
Publicación traducida automáticamente
Artículo escrito por bhagavatulaprathyusha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA