Question

在发生错误（例如，错误的电子邮件，错误的密码等）时，我需要将输入文本框标记为红色边框如果我这样做：

document.getElementById("loginFormEmail").style.borderColor = "red"

它保持红色后，会彻底改变样式，我需要将其更改回原始颜色。

Answer 1

事件开始后，应将输入边框设为红色。
您可以这样做：

if(error){  // your error checks
   document.getElementById("loginFormEmail").className += " error";
} else{
   document.getElementById("loginFormEmail").classList.remove("error");
}

，然后在您的CSS中：

.error{
   border-color: red;
}

这会将错误类添加到添加红色边框的输入中，并且当不再有错误时，它将删除该类，同时删除红色边框。

Answer 2

在HTML5中，您可以使用一项功能来进行表单验证

如果您输入的内容在表单内，则可以在输入（例如模式或类型）上使用属性，以使浏览器在客户端验证输入内容。

有关邮件地址的示例

<input type="email" id="email" pattern=".+@yourdomain.com" required>

如果要使用特定模式的输入

<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

它将验证输入并添加有效和无效的CSS伪类，从而使您的代码更加时尚

input:invalid {
  border: 1px solid red;
}

Answer 3

您应该在元素上添加事件侦听器“ change”，然后将颜色恢复为原来的颜色。

现在，您可以这样做：

const elem = document.getElementById("loginFormEmail");
const oldColor =elem.style.borderColor; // remember old color
elem.style.borderColor = "red";
elem.addEventListener("change", ()=>{
  elem.style.borderColor = oldColor; // revert to the old color
});

但是我强烈建议您在CSS中创建一个“红色”类，并添加/删除它，而不是在JS中设置颜色。

临时更改输入框样式

3 个答案: