<style>
input{
    border: 1px solid #9DE2EE;
}
input:focus{
    color: #434343;
}
input.invalid{
    border-color: #F29793;
    color: #F2645C;
}
::-webkit-input-placeholder{
    color: #BBB;
}
:-moz-placeholder{
    color: #BBB;
    opacity: 1;
}
::-moz-placeholder{
    color: #BBB;
    opacity: 1;
}
:-ms-input-placeholder{
    color: #BBB;
}
</style>
<form>
    <input type="email" name="email" id="email" placeholder="E-mail" pattern="[\w-\.]+@([\w-]+\.)+[\w-]{2,4}" required="" />
</form>
<script>
var email = document.getElementById('email');
email.form.noValidate = true; // отключаем html5 валидацию
email.onblur = function() {
    if (!this.value) {
        email.classList.remove('invalid');
        return;
    }
    var pattern = new RegExp('^' + this.getAttribute('pattern') + '$');
    if (!pattern.test(this.value)) {
        email.classList.add('invalid');
        return;
    }
    email.classList.remove('invalid');
    /*$.ajax({
        type: 'GET',
        url: '/reg/check/?v=email&val=' + this.value,
        cache: false,
        success: function(data) {
            if (data > 0) {
                email.classList.add('invalid');
            } else {
                email.classList.add('remove');
            }
        }
    });*/
};
</script>