所以我有一个小问题,我不明白它为什么这样做。我有一个文本框,它使用 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 调用。
有没有人明白为什么会这样?
最佳答案
问题是您从服务器代码设置“边框”,但使用 JS 设置“轮廓”。它们不是一回事,因此不会覆盖样式。
在你的javascript中,改变这个:
password_txt.style.outline = "1px solid red"
为此:
password_txt.style.border = "1px solid red";
Here is an example这表明它们有何不同
关于javascript - 文本框轮廓被覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31520000/