Javascript 尝试验证电子邮件时未显示类名

我有一个表单正在尝试验证电子邮件。如果电子邮件不正确，则不会显示输入的类。下面是html的代码：

<div class="email-entry desktop-container">
<div id="a"></div>
<form name="form1" action="#">
  <input id="test" type="text" name="text1" placeholder="Email Address" value="" onclick="return ValidateEmail(document.form1.text1)">
  <input type="image"  src="images/icon-arrow.svg" alt="submit">
  <p id="addedText"></p>
</form>

我尝试激活的css如下所示：

.invalidEmail{
边框：1px纯红；
背景图像：url（“/images/icon error.svg”）；
背景重复：无重复；
背景位置：75%25%；
}

---

在一天结束时，我希望图像以这样的形式出现。问题是似乎什么都没有出现。

要将类添加到输入元素中，需要使用并删除它，需要

元素.classList.remove

。 另外，document.getElementsByClassName（“invalidEmail”）将获得包含invalidEmail类名的所有元素。所以这里不需要

已通过您提到的回购协议：

• 是罪魁祸首之一。添加！“重要信息”现在可以正常工作（检查代码段中的边框），但理想情况下，您应该阅读相关内容，然后在不使用“重要信息”的情况下修复css！重要的

• 您似乎没有托管项目并直接打开index.html文件。将您的项目托管在某个服务器上（例如localhost），它应该可以正常工作（python-msimplehttpserver是一个简单的命令，可以帮助您快速生成一个本地服务器，您可以使用它，但也有其他服务器）

• 函数ValidateEmail

  未使用适当的正则表达式测试进行电子邮件测试。欲知详情

我已经试着帮你修好了

功能验证邮件（inputText）{
var mailformat=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}]））{124；（[a-zA Z-0-9]+-[a-zA Z]+$/.2}；；
if（mailformat.test（inputText.value））{
document.getElementById（“addedText”）.innerHTML=“”；
警报（“您输入了正确的电子邮件地址”）
//document.form1.text1.focus（）；
document.getElementById（“test”）.classList.remove（“invalidEmail”）
返回true；
}否则{
//var img=document.createElement（'img'）；
//img.src=“/images/icon error.svg”
document.getElementById（“addedText”）.innerHTML=“这是错误的电子邮件地址”；
document.getElementById（“测试”）.classList.add（“无效邮件”）
//警报（“您输入的电子邮件地址无效！”）；
document.form1.text1.focus（）；
返回false；
}
}

.invalidEmail{
边框：1px纯红！重要；
/*检查这里*/
背景图像：url（“https://image.flaticon.com/icons/png/128/752/752755.png");
背景重复：无重复；
背景位置：75%25%；
背景尺寸：12px 12px；
}

您正在尝试执行

document.getElementByClassName（“InvalidMail”）

但没有具有类

InvalidMail的元素。还有，你想用这个实现什么？我想在输入元素中激活invalidEmail类。你想找的是什么
document.getElementsByClassName（“invalidEmail”）
只需使用
invalidEmail
类获取所有元素的列表，您能解释一下哪些元素不起作用吗？你没有得到图像或其他东西。我在回答中添加了图像。让我知道，如果你得到一些不同的东西。或者你正在寻找其他我无法理解的东西似乎什么都没有发生没有图像没有边框突出显示。没什么！下面是我的github嗨！经过github回购后，我更新了答案。请重新检查答案，希望它现在可以正常工作：-）不幸的是，这仍然不起作用。输入字段中没有显示图标。是否显示红色边框？