Question

我在任务中需要帮助。输入的电子邮件无效后，我必须更改文本的颜色，表格的边框并添加新段落。我在JS中写了这样的代码：

$(document).ready(function () {
    if ($("#mail").is(':invalid')) {
        $("#mail_label").css('color', 'red');
        $("#mail").css('border', '1px solid red');
        var para = document.createElement("p");
        var node = document.createTextNode("Invalid email address");
        para.appendChild(node);

        var element = document.getElementById("new_paragraph");
        element.appendChild(para);
        para.setAttribute('id', 'new_text');
        $("#new_text").css({'color': 'red', 'text-align': 'right', 'margin-right': '5%', 'font-size': '12px'});
    };
});

这是我希望的DOM样式，但是从一开始就因为我的占位符是“输入您的电子邮件地址”。我希望它在输入无效后设置样式。我该如何实现？

如果将占位符更改为xy@xy.com，则我的网站将具有正常样式。但是，当我输入无效的邮件时，代码不会运行。

能帮我吗？对我来说非常重要，因为这是我的实习招聘任务。

Answer 1

最好使用class和css设置文档样式。

这是使用'classList'和'cloneNode'进行优化的代码。

var para = document.createElement("p");
var node = document.createTextNode("Invalid email address");
para.appendChild(node);

$(document).ready(function() {
  var new_paragraph = document.getElementById("new_paragraph");

  document.getElementById("mail").addEventListener("input", mail_changed);
});

function mail_changed() {
  if (!this.checkValidity()) {
    this.parentElement.classList.add("error");
    new_paragraph.appendChild(para.cloneNode(true));
  } else {
    this.parentElement.classList.remove("error");
    new_paragraph.innerHTML = "";
  }
}

form p.error input {
  border: 1px solid red;
}

form p.error label {
  color: red;
}

#new_paragraph p {
  color: red;
  text-align: right;
  margin-right: 5%;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label for="mail" id="mail_label">Mail: </label>
    <input type="email" id="mail" name="mail" placeholder="Enter your mail">
  </p>
</form>
<div id="new_paragraph"></div>

输入无效后如何设置DOM的样式？

1 个答案: