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

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最有可能拥有一些订阅其输入字段中的onkeyup，onkeypress和onblur事件的外部（或内部）JavaScript代码。

如果你想知道这是如何工作的，我建议你阅读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); 

}); 
})();