2016-02-26 105 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个不同的函数),现在它工作的很好。我尝试链接,但它没有工作。但我现在很好,稍后会检查。谢谢。