Question

我注意到在facebook中更改了密码，他们在底部有一个很好的警告，告诉你密码不匹配或确认密码太短。

然而，当我使用萤火虫时，我没有看到任何onkeyup或onchange。

他们做得非常好，无论我输入还是复制字符串和粘贴，它都会触发（我怀疑是javascript）验证。

他们是怎么做到的？更重要的是，我想复制他们的方式。

这是我在他们的HTML上看到的萤火虫。

<tr class="password confirm_password">
<td class="label">
Confirm Password:
<br/>
<small>(required)</small>
</td>
<td>
<input id="confirm_password" class="inputpassword" type="password" value="" name="confirm_password"/>
<div id="confirm_password_match_display" class="tips">
<span class="short_pass">Passwords do not match</span>
</div>
</td>
</tr>

奇怪的是，只有在触发时才会出现span class =“short_pass”。他们是如何做到的呢？并注意到他们输入的标签没有onkeyup或onchange属性。

Answer 1

优良作法是从JavaScript订阅onkeyup和onkeychange等事件，而不是将事件侦听器作为属性嵌入到元素本身中。这样可以很好地分离逻辑和内容。 Facebook很可能有一些外部（或内部）JavaScript代码订阅其输入字段的onkeyup，onkeypress和onblur事件。

如果您想了解其工作原理，建议您阅读QuirksMode.org的Introduction to Events和Advanced Event Registration Models。由于IE的模型和标准之间存在差异，因此最好使用JavaScript库为您完成此项工作。

一些例子是jQuery，YUI，Prototype和Dojo（目前还有更多我无法想到的）。我建议你选择一个框架，并熟悉它。它将使JavaScript开发变得更加容易。

以下是jQuery中的一些工作示例代码，您可以使用它来快速启动和运行。可以在此处找到完整的工作示例：http://jsbin.com/obama。如果您希望“正确”完成，则应使用为您处理逻辑的验证框架。这是一个example of a working jQuery validation framework，这里是the plugin it was written in。

(function() {
$(document).ready(function() {

    $("#password").blur(function() {

    });

    function validatePasswordsMatch() {
        var $pwd = $("#password");
        var $confirm = $("#confirmPassword");
        if ($pwd.val().length > 0 && $confirm.val().length > 0 && $pwd.val() != $confirm.val()) {
            $("#match").text("Passwords do not match.");
            $confirm.keyup(validatePasswordsMatch);
            $pwd.keyup(validatePasswordsMatch);
            console.log('alert bad');
        } else {
            $("#match").text("");
            console.log('alert');
            $confirm.unbind('keyup', validatePasswordsMatch);
            $pwd.unbind('keyup', validatePasswordsMatch);
        }
    }

    function validatePasswordLength() {
        var $pwd = $("#password");
        if ($pwd.val().length < 6) {
            $("#lengthMsg").text("Password does not meet length requirement.");
            // Bind to keypress so the validator re-validates as the user types when the text box gains focus.
            $pwd.keypress(validatePasswordLength);
        } else {
            $("#lengthMsg").text("");
            $pwd.unbind('keypress', validatePasswordLength);
        }
    }

    $("#password").blur(validatePasswordLength).blur(validatePasswordsMatch);
    $("#confirmPassword").blur(validatePasswordsMatch);

});
})();

facebook如何在密码更改时执行onkeyup和onchange？

1 个答案: