Question

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

这是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 Validation来实现此目的。可能有帮助。

由于

Answer 2

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

如果输入未验证，则提示也会禁用提交功能，如果输入无效，则会允许它。

我稍微改了一下。验证模糊和键盘。我确信此代码也可以进行更多优化，但可能略有改进：http://jsfiddle.net/JCTAc/5/

平滑jQuery密码确认验证

2 个答案: