平滑jQuery密码确认验证

我对jQuery相当陌生，并且已经编写了下面的代码来显示用户，因为他/她输入了他/她的密码/确认是否有效。我觉得代码是重复的和脏的，只有当用户不删除他们输入的部分内容时，它才能正常工作。然后事情变得有点古怪。平滑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"); 

    } 
    }); 
});

来源

2012-10-02 Will

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

提示也是禁用提交功能，如果输入不验证，然后允许它，如果它。

我重新做了一点。验证模糊和关键。我相信这段代码也可以进行更多的优化，但也许稍有改进：http://jsfiddle.net/JCTAc/5/

来源

2012-10-02 18:29:48

谢谢Daniel！提交失效也非常有用。 +1 – Will

你为什么不使用Jquery Validation这一点。可能会有所帮助。

感谢

来源

2012-10-02 18:02:54

我希望在输入第一个字段后以及在密码确认期间在Keyup上进行Blur更改。我还没有找到一种方法来与验证方法做到这一点，但如果你有一个例子或资源（或只是一些建议），将不胜感激。 – Will

平滑jQuery密码确认验证

回答

相关问题