Question

我没有收到Javascript错误，但代码什么都没做......

function registerValidator(target, validator) {
    var element = document.getElementById(target);
    if (element) {
        var validationID = element.id + "_validationResult";
        var validationSpan = document.createElement('span');
        validationSpan.id = validationID;

        element.parentNode.appendChild(validationSpan);

        element.onkeyup = function() {
            var result = validator(element);

            if (result.ok) {
                validationSpan.innerHTML = '<img src="/media/valid.gif" width="12" />';
            } else {
                validationSpan.innerHTML = '<img src="/media/invalid.gif" width="12" />';
                if (result.message) {
                    validationSpan.innerHTML += '<br />' + result.message;
                }
            }
        };
        alert(1);
    }
}

window.onload = function() {
    registerValidator('username', function(element) {
        var result = new Object();
        alert('validate');
        if (element.value.length >= 4) {
            result.ok = true;
        }
        else {
            result.ok = false;
            result.message = "Too short";
        }
        return result;
    });
    alert(2);
}

正确触发了两个警报（1和2），但从未触发“验证”警报。该函数用于以下元素：

<input type="text" name="username" id="username" />

我在谷歌浏览器，Firefox 3和Internet Explorer 8中试过这个。

Answer 1

这里的一切都运转良好。请参阅http://ashita.org/StackOverflow/validator.html

上的测试页

您目前正在使用element.onkeyup，这可能会被另一个脚本破坏。

尝试使用

if (element.addEventListener)
    element.addEventListener("keyup", validator,false);
else if (element.attachEvent) 
    element.attachEvent("onkeyup", validator);

参考文献：

attachEvent http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx
addEventListener https://developer.mozilla.org/en/DOM/element.addEventListener

Answer 2

您的元素看起来格格不入。在id =？

之后你真的有三个引号吗？

Answer 3

我认为脚本没有问题。我有以下的HTML在IE8和FF中使用你的脚本完美地工作，

<html>
<script>
function registerValidator(target, validator) {
    var element = document.getElementById(target);
    if (element) {
        var validationID = element.id + "_validationResult";
        var validationSpan = document.createElement('span');
        validationSpan.id = validationID;

        element.parentNode.appendChild(validationSpan);

        element.onkeyup = function() {
            var result = validator(element);

            if (result.ok) {
                validationSpan.innerHTML = '<img src="/media/valid.gif" width="12" />';
            } else {
                validationSpan.innerHTML = '<img src="/media/invalid.gif" width="12" />';
                if (result.message) {
                    validationSpan.innerHTML += '<br />' + result.message;
                }
            }
        };
        alert(1);
    }
}

window.onload = function() {
    registerValidator('username', function(element) {
        var result = new Object();
        alert('validate');
        if (element.value.length >= 4) {
            result.ok = true;
        }
        else {
            result.ok = false;
            result.message = "Too short";
        }
        return result;
    });
    alert(2);
}
</script>
<body>
<input type="text" id="username" name="username"/>
</body>
</html>

可能还有其他脚本尝试修改元素的onkeyup事件处理程序。

Answer 4

我已经在Chrome和IE8上进行了本地测试，它运行得非常好。你没有在你的代码中的其他地方设置window.onload事件吗？如何加载其他库，如JQuery或Prototype？

如果你完全没有收到任何东西，我会期望有些事情会覆盖onload或onkeyup事件。

Answer 5

onkeyup事件处理函数需要采用一个参数：

element.onkeyup = function(evt) {

请参阅the Mozilla docs。

Answer 6

糟糕。我忘记了页面标题中有另一个id为“username”的文本框，允许人们登录。显然，验证在那里工作得很好¬_¬

无法验证用户输入 - onkeyup事件未触发

6 个答案: