RegExp Email Validation
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="></script>
<div>
<input type="email" name="" placeholder="Digite seu Email Aqui!">
<span class="message success">Email válido!</span>
<span class="message error">Tente novamente!</span>
</div>
CSS
html, body {
height: 100%;
min-height: 100%;
}
body {
display:flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
div {
width: 50%;
}
input {
padding: 15px;
width: 100%;
font-size: 30px;
text-align: center;
border: 5px solid rgba(0, 0, 0, .3);
}
.message {
font: 20px Helvetica, Arial, Sans-serif;
padding: 20px;
display: none;
color: #fff;
width: 100%;
}
.error {
background: red;
}
.success {
background: green;
}
JavaScript
$(function(){
var regExp = /^\w*(\.\w*)?@\w*\.[a-z]+(\.[a-z]+)?$/;
$('[type="email"]').on('keyup', function() {
$('.message').hide();
regExp.test( $(this).val() ) ? $('.message.success').show() : $('.message.error').show();
});
});