这里的校验值大约是我的代码的一些信息:的JavaScript:输入
HTML:
<input autocomplete="off" class="red" id="name" name="name" onclick="checkName(this);" onkeyup="checkName(this);" onblur="checkName(this);" placeholder="Name*">
<button type="submit" onClick="validateName();">SUBMIT YER WORK!</button>
CSS:
input.red:focus {
background: #E45F56 !important;
border: 1px solid #E45F56 !important;
}
input.false {
background: #E45F56 !important;
border: 1px solid #E45F56 !important;
}
input.true {
background: #4aaaa5 !important;
border: 1px solid #4aaaa5 !important;
}
JAVASCRIPT:
var status = 0;
var name = document.getElementById("name").value;
function checkName(name) {
if (!name) {
status = 0;
name.classList.remove("red");
name.classList.remove("true");
name.classList.add("false");
} else if (name) {
status = 1;
name.classList.remove("red");
name.classList.remove("false");
name.classList.add("true");
}
}
function validateName() {
if (status == 0) {
window.location = "#fail";
name.focus();
} else if (status == 1) {
window.location = "#submitted";
}
}
全想法是,如果你输入t帽子输入字段,你会得到一个直接的反馈,导致场变成红色或绿色。如果您单击该按钮,将会打开一个弹出窗口。
此代码的唯一问题是,每次点击输入字段时它都会变成绿色而不是红色。这意味着另外,如果我点击那个按钮,“#submitted” - popup会弹出,即使我没有输入任何内容。
这不是你问的,但我建议你改变'onclick =“checkName(this);''for'onfocus =”checkName(this);“',因为使用onfocus时,即使用户按Tab键进入文本框。 – lmcarreiro
没有想过 - 谢谢! – jonhue