删除之前设置的边框颜色

Question

function validate() {
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;

	if (username == "") {

		document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
		document.getElementById("username").style.borderColor = "red";
		return false;
	}
	if (password == "") {


		document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
		document.getElementById("password").style.borderColor = "red";
		return false;
	}
}

#username:focus {
	background-color: yellow;
	border-color: green;
}

#password:focus {
	background-color: yellow;
	border-color: green;
}

#message {
	color: red;
}

<form onsubmit=" return validate()">
    LOGIN:-
    <br>
    <input id="username" type="text" name="username" placeholder="USERNAME">
    <br>
    <input id="password" type="password" name="password" placeholder="PASSWORD">
    <br>
    <input type="submit" value="SUBMIT">
    <p id="message">
</form>

• 当我专注于文本字段时，背景和边框颜色分别变为黄色和绿色（通过 css）。
• 如果我点击提交而不输入任何内容，边框颜色将变为红色（通过 javascript）。
• 但是当我再次将焦点放在文本字段上时，红色边框颜色不会消失，而是同时获得绿色和红色边框。

我只希望它是绿色的。你能不能解释一下这种行为的原因。

Answer 1

发生这种情况是因为您更新了元素样式而不是CSS类属性。元素样式的权重最高CSS。而是在错误时动态添加错误类，并在表单字段有效时将其删除。

根据文档，样式的降序顺序是。

1. 内联样式（在 HTML 元素内）
2. 外部和内部样式表（在头部部分）
3. 浏览器默认

这是一个工作示例

function validate() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username == "") {
        document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
        document.getElementById("username").classList.add("invalidInput");
        return false;
    } else {
        document.getElementById("username").classList.remove("invalidInput")
    }
    if (password == "") {
        document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
        document.getElementById("password").classList.add("invalidInput")
        return false;
    } else {
        document.getElementById("password").classList.remove("invalidInput")
    }
}

#username:focus {
    background-color: yellow;
    border-color: green;
}

#password:focus {
    background-color: yellow;
    border-color: green;
}

.invalidInput {
    border-color: red; 
}

#message {
    color: red;
}

<form onsubmit=" return validate()">
    LOGIN:-
    <br />
    <input id="username" type="text" name="username" placeholder="USERNAME" />
    <br />
    <input id="password" type="password" name="password" placeholder="PASSWORD" />
    <br />
    <input type="submit" value="SUBMIT" />
    <p id="message"></p>
</form>