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

我在一项任务中需要帮助。在键入的电子邮件无效后，我必须更改文本的颜色、表单的边框并添加新段落。我在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我的网站有正常的风格。但当我放入无效邮件时，代码不会运行

---

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

你最好使用类和css来设计文档的样式

下面的代码使用'classList'和'cloneNode'进行了一些优化

var para=document.createElement（“p”）；
var node=document.createTextNode（“无效电子邮件地址”）；
子节点（节点）段；
$（文档）.ready（函数（）{
var new_段落=document.getElementById（“new_段落”）；
document.getElementById（“邮件”）.addEventListener（“输入”，邮件更改）；
});
功能邮件_已更改（）{
如果（！this.checkValidity（））{
this.parentElement.classList.add（“错误”）；
新的_段appendChild（第cloneNode段（真））；
}否则{
this.parentElement.classList.remove（“错误”）；
新的_段落。innerHTML=“”；
}
}

表单p.错误输入{
边框：1px纯红；
}
表格p.错误标签{
颜色：红色；
}
#新的第p段{
颜色：红色；
文本对齐：右对齐；
保证金权利：5%；
字体大小：12px；
}

邮寄：

您应该添加一个

else

块，以确定它何时有效，并在

#mail

值为空时进行处理。考虑在CODEPTEN或其他站点上创建一些东西来节省时间。当用户输入字段中的某个东西时，您应该检查它是否有效，而不是在DOM准备（仅一次）上。这是因为您在Pabeload上执行代码，并且因为您的输入将是空的，所以它将无效。如果您在邮件输入发生变化时执行逻辑会更好。这肯定比我的代码好。谢谢您的回答。不幸的是，它不仅在按“回车”键时执行，而且在每个键之后执行。