验证电子邮件 JavaScript:当电子邮件不正确时显示叉号/当电子邮件正确时显示勾号

validate email javascript: show cross when email incorrect/show tick when email correct?

本文关键字：电子邮件 显示 JavaScript 验证 不正确      更新时间：2023-09-26

我的电子邮件验证脚本有问题，目前我的脚本会在用户单击后验证电子邮件文本框中的文本，如果电子邮件无效，则显示一个叉号，如果电子邮件有效，则打勾，我得到的问题是如果用户输入有效的电子邮件，然后出于任何原因，如果他们随后返回并键入有效的电子邮件，则显示一个勾号我让十字架和刻度同时出现在彼此之上。

有谁知道我如何修正它，只在电子邮件无效时显示叉号，只在电子邮件有效时显示勾号。

这是我的代码：

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

我该怎么做？

如果电子邮件验证失败，您需要隐藏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;
}

这应该：

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';
}
相关文章：