javascript - 平滑 jQuery 密码确认验证

Question

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

这是 js fiddle :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、.validated)并从 css 控制样式。而且你在代码中经常重复自己。相同的功能被写了3次。这是将该功能分解为函数的真正标志。

还有一个提示，如果输入未验证，则禁用提交功能，如果输入验证通过，则允许提交功能。

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