我正在进行基本的JavaScript表单验证
var seUSer = document.getElementById("seUSername");
seUser.addEventListener("blur", validator(seUsername), false);
function validator (input) {
if (input.value == "") {
input.style.color="#fff";
} else {
input.style.color="#f0f0f0";
}
}
在这种情况下，我希望用户在执行“模糊”操作后，如果其值为空，则具体输入会更改颜色，因此单击即可，但是它会在页面加载时更改颜色，即用户无需执行任何操作，是否为“模糊”操作默认输入？或正确的方法来处理这种情况。
这是jsFiddle：http : //jsfiddle.net/Z4K6D/
如您所见，该字段从一开始就是红色，但是只有当用户将焦点移开并且其中没有任何内容时，它才应该是红色。
这段代码：
loginUsername.addEventListener("blur", validateForm(loginUsername), false);
正在调用 并将其返回值传递validateForm到addEventListener，恰好是foo(bar()) 调用 bar并将返回值传递到的方法foo。您没有将其设置为事件处理程序。
要将函数设置为事件处理程序，您无需调用它，只需传递对其的引用即可。由于要为函数提供参数，因此在这种情况下，您需要在函数周围包装一个函数：
loginUsername.addEventListener("blur", function() {
validateForm(loginUsername);
}, false);
或者，使您的validateForm函数this而不是与input参数一起工作：
document.getElementById("loginUsername").addEventListener("blur", validateForm, false);
// Note no (), we're not calling it ------------------------------------------^
function validateForm () {
if (this.value == "") {
this.style.background="#f26060";
} else {
this.style.background="#fff";
}
}
......因为在事件处理程序通过挂钩addEventListener，this被设置为在其上钩住事件的元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句