平滑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密碼確認驗證

回答

相關問題