Question

我的电子邮件验证脚本出现问题，目前我的脚本在用户点击它后验证电子邮件文本框中的文本，如果电子邮件无效则显示十字，然后勾选电子邮件是有效的，我得到的问题是，如果用户键入有效的电子邮件，然后无论出于何种原因，如果他们然后返回并键入一个无效的电子邮件我得到交叉和勾号立即显示在彼此之上。

有没有人知道如何修改此功能，只有在电子邮件无效时才显示十字架，并且只在电子邮件有效时显示勾号。

这是我的代码：

<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>

我该怎么做？

Answer 1

如果电子邮件验证失败，您需要隐藏Tick：

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

这应该：

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';
}

验证电子邮件javascript：电子邮件不正确时显示交叉/电子邮件正确时显示勾选？

2 个答案: