javascript - 文本框轮廓被覆盖

Question

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

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

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

这是我的客户端验证代码 (JavaScipt):

function checkPassword(password)
{
    password_txt = document.getElementById('<%= password_txt.ClientID %>');
    if (password == '')
    {
        password_lbl.innerHTML = 'Password must be at least 6 characters';
        password_lbl.style.color = "red";
        password_txt.style.outline = "1px solid red"
        //register_btn.disabled = true;
        passwordCheck = false;
    }
    else
    {
        password_lbl.innerHTML = 'Perfect!';
        password_lbl.style.color = "green";
        password_txt.style.outline = "1px solid green"
        //register_btn.disabled = true;
    }

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

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;
}

使用 OnClick 调用。

有没有人明白为什么会这样？

Answer 1

问题是您从服务器代码设置“边框”，但使用 JS 设置“轮廓”。它们不是一回事，因此不会覆盖样式。

在你的javascript中，改变这个:

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

为此:

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

Here is an example这表明它们有何不同