La tarea es implementar cómo se valida el correo electrónico en jQuery. jQuery es la biblioteca de JavaScript más rápida y liviana que se utiliza para simplificar las interacciones entre un documento HTML/CSS , o más precisamente el Modelo de Objetos de Documento (DOM) y JavaScript .
jQuery es ampliamente famoso por su lema «Escribe menos, haz más». Simplemente significa que puede lograr su objetivo simplemente escribiendo unas pocas líneas de código.
Enfoque: puede validar el correo electrónico usando jQuery usando el patrón regex. La expresión Regex se usa para la operación de búsqueda y son strings especiales que representan un patrón que debe coincidir.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
body {
text-align: center;
}
.contactform-buttons {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<script>
$(document).ready(function () {
$('.error').hide();
$('#submit').click(function () {
var name = $('#name').val();
var email = $('#email').val();
if (name == '') {
$('#name').next().show();
return false;
}
if (email == '') {
$('#email').next().show();
return false;
}
if (IsEmail(email) == false) {
$('#invalid_email').show();
return false;
}
$.post("", $("#myform").serialize(),
function (response) {
$('#myform').fadeOut('slow', function () {
$('#correct').html(response);
$('#correct').fadeIn('slow');
});
});
return false;
});
});
function IsEmail(email) {
var regex =
/^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test(email)) {
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<form action="" method="post" id="contactform">
<label for="name">Name:</label>
<input name="name" id="name" type="text"
placeholder="Please enter your name"
class="contact-input">
<span class="error">
Enter your name here
</span>
<label for="email">Email :</label>
<input name="email" id="email" type="text"
placeholder="Please enter your email"
class="contact-input">
<span class="error">
Enter your email-id here
</span>
<span class="error" id="invalid_email">
Email-id is invalid
</span>
<br /><br />
<input type="submit"
class="contactform-buttons"
id="submit" value="Send" />
<input type="reset"
class="contactform-buttons"
id="" value="Clear" />
</form>
<div id="correct"
style="color:gray;">
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA