2016-02-26 76 views
0

我有一個應用程序,我在驗證密碼。我有一個彈出式窗口(引導程序)列出了規則,它們從X更改爲基於符合條件的檢查。除了一種情況之外,一切正常。使用jQuery的問題密碼驗證

我輸入密碼1,檢查發生,並沒有問題,然後我輸入第二個密碼,它也很好。然後,如果我將密碼字段移到另一個密碼字段並回到密碼字段,他們會說它是無效的。但在技術上它們是匹配的密碼。(我試圖改變類glyphicon,確定在兩個密碼字段,但隨後的問題是相反的)

密碼字段

<form:input id="password1" type="password" class="form-control" path="password11" 
    title="Password Check" data-toggle="popover" data-placement="bottom" data-html="true" 
    data-content="<span id=&quot;char&quot; class=&quot;glyphicon glyphicon-remove&quot; style=&quot;color:#FF0004;&quot;></span>10-30chars</li></ul><br>" 
    /> 

    <form:input id="password2" type="password" class="form-control" path="password22" 
     title="Password Check" data-toggle="popover" data-placement="bottom" data-html="true" 
     data-content="<span id=&quot;char&quot; class=&quot;glyphicon glyphicon-remove&quot; style=&quot;color:#FF0004;&quot;></span>Password match</li></ul><br>" 
     /> 

JS文件

$(document).ready(function() { 

    //$("input[type=password]").keyup(function(){ 
    //$("#element").on('keyup change', function() 
    //$("input[type=password]").on('keyup focus focusout change', (function 

    $("input[type=password]").keyup(function(){ 

     if(($("#password1").val().length >= 10) && ($("#password1").val().length <= 30)){ 
      $("#char").removeClass("glyphicon-remove"); 
      $("#char").addClass("glyphicon-ok"); 
      $("#char").css("color","#"); 
     }else{ 
      $("#char").removeClass("glyphicon-ok"); 
      $("#char").addClass("glyphicon-remove"); 
      $("#char").css("color","#"); 
     } 



     if($("#password1").val() == $("#password2").val()){ 
      $("#pwmatch").removeClass("glyphicon-remove"); 
      $("#pwmatch").addClass("glyphicon-ok"); 
      $("#pwmatch").css("color","#"); 
     }else{ 
      $("#pwmatch").removeClass("glyphicon-ok"); 
      $("#pwmatch").addClass("glyphicon-remove"); 
      $("#pwmatch").css("color","#"); 
     } 
}); 


}); 

所以我需要能夠驗證密碼,即使我從外地移動回來,他們應該顯示右鍵彈出值(如果兩個意思密碼匹配,我應該看看檢查,否則X)。

謝謝。

+0

提供的代碼缺少上下文。請提供一個工作示例?我只能猜測,這個標記是從一個春季項目中獲得的? –

+0

數據內容屬性中的標記沒有太大意義 - 可能有更多的上下文。然而,你似乎想要從char到pwmatch –

+0

設置第二個數據內容屬性的內容的正確標識也許這有助於作爲出發點:https://jsfiddle.net/axfakkva/ –

回答

0

我能夠得到這個工作,雖然它不優雅。我只是添加了整個keyup函數來聚焦函數(現在都是2個不同的函數),現在它工作的很好。我嘗試鏈接,但它沒有工作。但我現在很好,稍後會檢查。謝謝。