使用JavaScript更改文本框边框颜色

Question

我正在进行表单验证。当表单输入不正确时，我会在文本框周围添加红色边框：

document.getElementById("fName").style.borderColor="#FF0000"

这会给我一个2像素的红色边框。我想要做的是，如果用户输入了正确的值，则返回原来的边框...

有人能告诉我如何在Javascript中更改边框大小和颜色吗？

- kevin

Answer 1

使用CSS类别来应用CSS样式

CSS

.error {
  border:2px solid red;
}

现在使用Javascript

document.getElementById("fName").className = document.getElementById("fName").className + " error";  // this adds the error class

document.getElementById("fName").className = document.getElementById("fName").className.replace(" error", ""); // this removes the error class

我提到这个主要原因是，假设你想要改变出错元素的边框颜色。如果你选择你的方法，你可能需要修改代码中的许多地方。如果你选择我的方法，你只需要编辑样式表。

- John Hartsock

---

Savas Vedova 的评论（被拒绝的编辑）：classname 不是有效的。应该改为 className。 - Anne

这是每次的类。 - Hunsu

如果div已经有其他以“error”开头的类，这可能有点可怕...请参见https://dev59.com/0Ggu5IYBdhLWcg3wRlH0以获取一些现代选项，但原则是正确的，添加一个类然后删除它 :) - rogerdpack

Answer 2

document.getElementById("fName").style.border="1px solid black";

- josh.trow

Answer 3

你可以尝试一下。

document.getElementById('name').style.borderColor='#e52213';
document.getElementById('name').style.border='solid';

- CEN

---

请尝试用语言来回答而不只是代码。由于你的回答时间很晚，那么你的回答与其他人的有何不同？ - Artemix

Answer 4

给你的输入框添加一个onchange事件：

<input type="text" id="fName" value="" onchange="fName_Changed(this)" />

Javascript:

function fName_Changed(fName)
{
    fName.style.borderColor = (fName.value != 'correct text') ? "#FF0000"; : fName.style.borderColor="";
}

- BumbleB2na

Answer 5

我同意Vicente Plata的观点，你应该尝试使用jQuery，它是最好的javascript库。你可以在CSS文件中创建一个类，并使用jQuery进行以下操作：

$('#fName').addClass('name_of_the_class'); 

这就是全部内容了，当然您不必担心浏览器的不兼容性，那是jQuery团队的问题:D LOL

- PachinSV

Answer 6

document.getElementById("fName").style.borderColor="";

这是你需要的来改变边框颜色的代码。

如果要改变边框大小，请使用element.style.borderWidth = "1px"。

- Matt Ball

---

是的，但它给了我2px的边框... 如果可能的话，我想要1px的边框。 - kevin

Answer 7

如果用户输入不正确的值，请在输入框周围应用1像素红色边框：

document.getElementById('fName').style.border ="1px solid red";

如果用户输入了正确的值，则从输入字段中移除边框：

document.getElementById('fName').style.border ="";

- Nandu Hulsure