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

Question

我有一个表格正在尝试验证电子邮件。如果电子邮件不正确，则不会显示输入类。下面是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>

下面我实现了以下javascript：

function ValidateEmail(inputText) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (inputText.value.match(mailformat)) {
    alert("You have entered a correct email addresss")
    document.form1.text1.focus();
    return true;
  } else {
    // var img = document.createElement('img');
    // img.src = "/images/icon-error.svg"
    document.getElementById("addedText").innerHTML += "This is the wrong email address";
    document.getElementByClassName("invalidEmail")
    // alert("You have entered an invalid email address!");
    document.form1.text1.focus();
    return false;
  }
}

我试图激活的CSS如下：

.invalidEmail {
  border: 1px solid red;
  background-image: url("/images/icon-error.svg");
  background-repeat: no-repeat;
  background-position: 75% 25%;
}

归根结底，我希望图像以这样的形式出现。. 问题似乎没有出现。

标签： javascripthtmlcssemail

Answer 1

要将类添加到您的输入元素，您需要使用element.classList.add并删除它element.classList.remove。此外，document.getElementsByClassName("invalidEmail") 将为您提供所有包含 invalidEmail 类名的元素。所以这里不需要

已经完成了你提到的回购：

• CSS 特异性是这里的罪魁祸首之一。添加 !important 现在可以正常工作（检查代码段中的边框），但理想情况下，您应该阅读它，然后在不使用 !important 的情况下修复 css

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

• function ValidateEmail没有使用正确的正则表达式测试进行电子邮件测试。阅读此处了解更多详情

已尝试为您修复

function ValidateEmail(inputText) {
  var mailformat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;;

  if (mailformat.test(inputText.value)) {
    document.getElementById("addedText").innerHTML = "";
    alert("You have entered a correct email addresss")
    //document.form1.text1.focus();
    document.getElementById("test").classList.remove("invalidEmail")
    return true;
  } else {
    // var img = document.createElement('img');
    // img.src = "/images/icon-error.svg"
    document.getElementById("addedText").innerHTML = "This is the wrong email address";
    document.getElementById("test").classList.add("invalidEmail")
    // alert("You have entered an invalid email address!");
    document.form1.text1.focus();
    return false;
  }
}

.invalidEmail {
  border: 1px solid red !important;
  /*Check here*/
  background-image: url("https://image.flaticon.com/icons/png/128/752/752755.png");
  background-repeat: no-repeat;
  background-position: 75% 25%;
  background-size: 12px 12px;
}

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

希望能帮助到你。如有任何疑问，请回复。

注意：这就是图标图像和红色边界为我而来的方式