Javascript 正在覆盖的文本框轮廓

所以我有一个小问题，我不明白它为什么这么做。我有一个文本框，它使用JavaScript进行客户端验证，也使用C#进行服务器端验证，因此从下面的屏幕截图中可以看出，我已经完成了一些服务器端验证，因此当用户点击注册而文本框中输入的字符不超过6个时，文本框将显示红色轮廓：

但是，因为我也有用于客户端验证的JavaScript，当用户键入超过6个字符时，文本框应该有一个绿色的轮廓，下面的屏幕截图显示了它的效果，但是服务器端验证文本框轮廓仍然保留在下面，因此您仍然可以在绿色下看到红色轮廓：

据我所知，每个文本框的大纲属性都是相同的，所以为什么要创建新的大纲呢

这是我的客户端验证代码（JavaScipt）：

这是使用OnClick调用的

---

有人知道它为什么会这样做吗？

问题是，您正在从服务器代码设置“边框”，但使用JS设置“大纲”。它们不是同一件事，因此不会覆盖样式

在javascript中，更改以下内容：

password_txt.style.outline = "1px solid red"

为此：

password_txt.style.border = "1px solid red";

---

这显示了它们之间的区别

在将

属性设置为绿色之前，您还可以尝试清除
.outline
属性。outline=“0px”

在

之前。outline=“1px纯绿色

@musefan完美的工作方式！我仍然不明白为什么它与outlineSo不同。基本上，从你的例子来看，大纲是包围边框的东西，而不是文本框本身：大纲是围绕元素（边框外）绘制的一条线，使元素“突出”。

password_txt.style.outline = "1px solid red"

password_txt.style.border = "1px solid red";