<html>
<head>
</head>
<body>
<input id="email" type="email">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/;
$('#email').keyup(function(){
!pattern.test($('#email').val())? $('#email').css('background-color', 'red'): $('#email').css('background-color', 'white');
});
</script>
</body>
</html>