jquery驗證確認密碼

我正在使用http://bassistance.de/jquery-plugins/jquery-plugin-validation/來驗證表單，該表單將允許用戶更改其現有設置。該表格有一個密碼字段以及一個用於確認密碼的字段。要保持密碼不變，我指示用戶將其保留爲空（也許有一些更直觀的方法可以做到這一點？），並且僅當用戶更改其密碼時才顯示確認密碼字段。jquery驗證確認密碼

它工作得很好，但有兩個問題。首先，如果您在密碼字段中輸入內容並按Tab鍵，則不會進入確認密碼字段，而是進入後面的下一個字段。其次，如果您在密碼字段中輸入了某些內容並按下回車鍵，則在確認密碼被選中之前提交表單。出於某種原因，這第二個缺陷不會使用jsfiddle演示http://jsfiddle.net/4htKu/2/顯示，但它在第二個相同的演示http://tapmeister.com/test/validatePassword.html上執行。以下代碼與前面提到的兩個演示完全相同。我相信這些問題與隱藏的confirm_password密碼有關，但我不確定。我需要做些什麼來解決這兩個問題？謝謝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
     <title>jQuery validation plug-in - main demo</title> 

     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
      $(function() { 

       $("#confirm_password").parent().hide(); 
       $("#password").val(''). 
       blur(function() { 
        $t=$(this); 
        if($.trim($t.val())!="" && !$t.hasClass('error')) {$("#confirm_password").parent().show();} 
        else if($.trim($t.val())=="") {$("#confirm_password").val('').parent().hide();} 
       }); 

       // validate signup form on keyup and submit 
       $("#signupForm").validate({ 
        rules: { 
         firstname: {required: true,minlength: 2}, 
         lastname: {required: true,minlength: 2}, 
         username: {required: true,minlength: 2}, 
         password: {required: true,minlength: 2}, 
         confirm_password: {required: true,minlength: 2, equalTo: "#password"} 
        }, 
        messages: {}, 
        submitHandler: function(form) {alert("submitted");} 
       }); 

      }); 
     </script> 

    </head> 
    <body> 

     <form class="cmxform" id="signupForm" method="get" action=""> 
      <fieldset> 
       <legend>Validating a complete form</legend> 
       <p> 
        <label for="firstname">Firstname*</label> 
        <input id="firstname" name="firstname" /> 
       </p> 
       <p> 
        <label for="lastname">Lastname*</label> 
        <input id="lastname" name="lastname" /> 
       </p> 
       <p> 
        <label for="username">Username*</label> 
        <input id="username" name="username" /> 
       </p> 
       <p> 
        <label for="password">Password (Leave blank to remain unchanged)</label> 
        <input id="password" name="password" type="password" /> 
       </p> 
       <p> 
        <label for="confirm_password">Confirm password</label> 
        <input id="confirm_password" name="confirm_password" type="password" /> 
       </p> 
       <p> 
        <label for="other">Other Non-required</label> 
        <input id="other" name="other" /> 
       </p> 
       <p> 
        <input class="submit" type="submit" value="Submit" /> 
       </p> 
      </fieldset> 
     </form> 

    </body> 
</html>

來源

2013-01-02 user1032531

查看http://www.w3schools.com/tags/att_global_tabindex.asp，用於控制選項卡上點擊的元素 – Liam

從可用性角度來看，我建議將確認的視圖從onBlur更改爲onKeypress。在每個按鍵通過現場檢查後，看是否有東西存在，如果是則顯示確認，否則隱藏確認。 – Syon

@Syon。看起來你和凱文同意。我將測試併發布結果。感謝您的評論。 – user1032531

而不是使用.blur，使用.keydown和settimeout來檢測，如果該值是空白的。如果不是空白，則顯示它，否則，隱藏它。

$("#password").keydown(function() { 
    var self = this, $self = $(this); 
    setTimeout(function(){ 
     if ($.trim(self.value) != "" && !$self.is(".error")) { 
      $("#confirm_password").parent().show(); 
      return; 
     } 
     $("#confirm_password").val('').parent().hide(); 
    },0); 
});

至於按下輸入，是不是它應該做什麼？提交表格？

使用.blur的原因不起作用，因爲在顯示隱藏字段之前，您正在切換到下一個字段。這段代碼修復了這個問題。

來源

2013-01-02 16:05:59

感謝凱文，我會嘗試.keydown。至於按Enter鍵，它會在用戶有機會輸入confirm_password之前提交表單。我認爲（希望）你的解決方案也可以修復它，因爲它使得confirm_password輸入可見，因此將被驗證。 – user1032531

@Kevin有一個問題，爲什麼你使用立即超時，我以前沒有見過這種技術。 user1032531也許應該刪除密碼所需的規則，否則將其留空以不更改密碼的邏輯不起作用。 http://jsfiddle.net/4htKu/3/ –

@politus。同意密碼所需的規則。並不意味着要包括它。 – user1032531

爲什麼不詢問用戶是否想用複選框更改密碼？如果選中它，則顯示密碼字段，如果不允許提交表單。

其他HTML：

<p> 
    <label for="passwordChangeYes">Check if you want to change your password</label> 
    <input type="checkbox" name="passwordChangeYes" id="passwordChangeYes" value="Yes" /> 
</p>

其它JS：

$("#password").hide(); 
$('#passwordChangeYes').one("click", function() { 
    if ($('#passwordChangeYes').is(':checked')) { 
      $("#password").fadeIn(400); 
     } 
    });

我不知道如何刪除或點擊該複選框驗證部分添加需要的部分。但也許這是一個起點？

來源

2013-01-07 19:11:56 asherrard

jquery驗證確認密碼

回答

相關問題