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

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

Answer 1

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

已完成您提到的 repo :

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

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

  <

• 函数 ValidateEmail 未使用正确的正则表达式测试进行电子邮件测试。 Read here了解更多详情

已尝试为您修复它

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>

希望对您有所帮助。如有任何疑问，请回复。

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