正在重叠的TextBox大纲

Question

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

但是因为我还有用于客户端验证的JavaScript，当用户输入超过6个字符时，文本框应该有一个绿色轮廓，下面的屏幕截图演示了它，但服务器端验证文本框大纲仍然在下面，所以你仍然可以看到绿色下面的红色轮廓：

我只是不明白为什么会发生这种情况，据我所知，每个文本框的outline属性都是相同的，为什么要创建新的轮廓？

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

if (password_txt.Text == "")
{
    password_lbl.Text = "Password must be at least 6 characters";
    password_lbl.ForeColor = System.Drawing.Color.Red;
    password_txt.BorderColor = System.Drawing.Color.Red;
    password_txt.BorderWidth = 1;
    password_txt.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid;
    register_btn.Enabled = false;
}
else
{
    password_lbl.Text = "Perfect!";
    password_lbl.ForeColor = System.Drawing.Color.Green;
    password_txt.BorderColor = System.Drawing.Color.Green;
    password_txt.BorderWidth = 1;
    password_txt.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid;
    register_btn.Enabled = false;
    passwordCheck = true;
}

使用文本框上的keyup事件调用checkPassword。现在这是服务器端验证：

{{1}}

使用OnClick调用。

是否有人理解为什么表演是这样的？

Answer 1

问题在于你正在设置＆＃34; border＆＃34;来自服务器代码，但设置＆＃34; outline＆＃34;使用JS。这些不是一回事，所以它不会覆盖风格。

在您的javascript中，更改此内容：

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

到此：

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

Here is an example显示了他们的差异