平滑 jQuery 密码确认验证

Question

我对jQuery相当陌生，并且编写了以下代码来向用户显示他/她输入的密码/确认是否有效。我觉得代码是重复和肮脏的，只有当用户不删除他们键入的部分内容时，它才能很好地工作。然后事情变得有点古怪。

这是js小提琴：http://jsfiddle.net/JCTAc/

这是JS*（忽略复选框的内容）：

$(function() {
  $('.checkbox').hide();
  $("#password").blur(function(){
var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();
  if ( passwordVal.length >=6 ) {
       $("#password").css("border","1px solid #9EAD3A"); 
      }
  else {
       $("#password").css("border","1px solid #E93E3C");
      $('.checkbox').hide();
  }
});
$("#password_confirmation").keyup(function() {
var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();
    if (passwordVal == checkVal) {
        if (checkVal.length > 5 ) {
        $("#password_confirmation").css("border","1px solid #9EAD3A");
        $(".checkbox").show(100);
    }
}
    else {
        $("#password_confirmation").css("border","1px solid #E93E3C");
        $('.checkbox').hide();
    }
});

$("#password,#password_confirmation").blur(function(){
var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();

    if (passwordVal != checkVal) {
        $('.checkbox').hide();
        $("#password_confirmation").css("border","1px solid #E93E3C");
    }
  });
});

​

Answer 1

首先，你不应该像在jQuery/javascript中那样设置边框颜色。尽可能将样式和浏览器行为彼此分开非常重要。更好的方法是设置一个类（例如.error，.validified）并从css控制样式。此外，您在代码中经常重复自己。相同的功能被写入 3 次。将该功能分解为函数的真正标志。

一个提示是，如果输入未验证，则禁用提交功能，如果验证，则允许它。

我稍微修改了一下。验证模糊和键控。我相信这段代码也可以进一步优化，但也许略有改进：http://jsfiddle.net/JCTAc/5/

Answer 2

为什么不使用 Jquery Validation 来解决这个问题。 也许会有所帮助。

谢谢