要使用jQuery验证电子邮件，请使用正则表达式模式。您可以尝试运行以下代码，以了解如何使用jQuery验证电子邮件-
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<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>
<form action="" method="post" id="contactform">
<table class="mytable">
<tr>
<td><label for="name">Name :</label></td>
<td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="error">Enter your name here</span></td>
</tr>
<tr>
<td><label for="email">Email :</label></td>
<td class="email"><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>
</td>
</td>
</tr>
<tr>
<input type="submit" class="contactform-buttons" id="submit"value="Send" />
<input type="reset" class="contactform-buttons" id="" value="Clear" />
</tr>
</tr>
</table>
</form>
<div id="correct" style="color:gray;"></div>
</body>
</html>