javascript - 只有在输入被证明不正确后，如何才能使文本字段突出显示为红色？

Question

我有这个表格(我知道，目前非常基础和凌乱。):

这是加载时的样子。

这是我的 CSS:

img {
    position: fixed;
    right: 100px;
    top: 100px;
}

input:invalid {
    background-color : #ff0000;
}

input:valid {
    background-color : #99ff99;
}

我想知道的是，只有当用户因输入不正确而返回页面时，我怎样才能让字段显示为红色？

Here's带有相关 HTML、CSS 和 JS 的 JSFiddle。

Answer 1

当点击提交按钮时，在让用户继续之前检查字段，如果不正确，返回 false; 这样提交按钮就不会刷新页面。

然后在所有错误的元素上使用 yourelement.style.backgroundColor = "red";。