验证电子邮件javascript：当电子邮件不正确时显示叉号/在电子邮件正确时显示刻度线？

Question

Im having a problem with my email validation script, at the moment my script validates the text in the email text box once the user clicks out of it, displaying a cross if the email is not valid and then a tick if the email is valid, the problem i get is if the user types in a valid email and then for whatever reason if they then go back and type an ivalid email i get both the cross and the tick showing up on top of each other at once.

Does anyone know how i can ammend this to only have the cross showing when email is invalid and only show the tick when email is valid.

Here is my Code :

<script>
function validateEmail(emailField){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
            document.getElementById("emailCross").style.display='block';
            return false;
        }
        document.getElementById("emailCross").style.display='none';
        document.getElementById("emailTick").style.display='block';
        return true;

}
</script>

html:

<input type="text" id="field_email" name="email" onfocus="document.getElementById('field_email').style.background='#ffffff';" onblur="validateEmail(this);" />
<div id="emailCross"></div><div id="emailTick"></div>

How can i do this ?

Answer 1

You need to Hide the Tick if the email validation fails :

function validateEmail(emailField){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
            document.getElementById("emailTick").style.display='none'; // Hide tick if validation Fails
            document.getElementById("emailCross").style.display='block';
            return false;
        }
        document.getElementById("emailCross").style.display='none';
        document.getElementById("emailTick").style.display='block';
        return true;

}

Answer 2

This should to:

if (reg.test(emailField.value) == false) {
    document.getElementById("emailTick").style.display='none';
    document.getElementById("emailCross").style.display='block';
    return false;
} else {
    document.getElementById("emailCross").style.display='none';
    document.getElementById("emailTick").style.display='block';
}