未提交表單的密碼強度驗證程序

Question

我使用的是一個名爲pStrength.jquery.js的插件，它以前正在工作，但由於某種原因它已經停止，我不確定如果我做錯了什麼。

這是代碼我的網頁

<cfinclude template="header.cfm"> 
    <cfparam name="ERROR" default=""> 
    <cfparam name="FORM.ACTION" default=""> 
    <cfparam name="form.NEWPASS1" default=""> 
    <Cfparam name="form.NEWPASS2" default=""> 
    <cfparam name="message" default=""> 

    <style> 
     #myElement1, #myElement2 { 
     padding:4px; 
     margin:2px; 
     border:solid 1px #999; 
     } 

     #myElement2 { 
     background-color:#036; 
     } 

    div { 
     margin-left:20px; 
     margin-top:6px; 
    } 
    .left { 
     float:left; 
    } 
    .clear { 
     clear:both; 
    } 
    </style> 


    <table border="0" cellpadding="0" cellspacing="1" width="780" class="Border" align="center"> 
    <tr> 
    <td class="Navsub" align="left" colspan="2">Reset Password</td> 
    </tr> 


    <cfif FORM.ACTION eq "CHANGE"> 
    <Cfif form.NEWPASS1 neq form.NEWPASS2> 
    <Cfset error = 1> 
    <Cfset message = "Your passwords did not match. Please retry"> 
    <Cfelse> 
     <cfquery name="update_password" datasource="#application.db#"> 
      update tbladmin set adminpass = '#form.newpass1#' where adminid = #session.adminid# 
    </cfquery> 
    <Cfset error = 0> 
    <cfset message = "Your password has been updated. You will be required to enter it the next time you login"> 
</Cfif> 

<cfoutput> 
    <form id="myForm" action="?#createuuid()#" method="post"> 
    <Cfif error neq ""> 
    <Tr> 
    <Td align="center" class="Error" colspan="2" bgcolor="##fb565d">#message#</Td> 
    </Tr> 
    </Cfif> 
    <tr> 
    <td align="right" class="Copy" valign="middle">New Password:</td> 
    <td align="left" class="Copy" valign="top"><input name="NEWPASS1" type="password" class="textblock" required="yes" message="Please enter your new password" id="myElement1" data-display="myDisplayElement1"><div class="left" id="myDisplayElement1"></div></td> 
    </tr> 
    <tr> 
    <td align="right" class="Copy" valign="middle">Confirm Password:</td> 
    <td align="left" class="Copy" valign="top"><input name="NEWPASS2" type="password" class="textblock" required="yes" message="Please re-enter your new password" id="myElement2" data-display="myDisplayElement2"><div class="left" id="myDisplayElement2">  </div></td> 
    </tr> 

    <tr> 
    <td>&nbsp;</td> 
    <td align="left"> 
    <input type="submit" name="Action" value="Change" class="submitbutton"></td> 
    </tr> 

    </form> 
    </cfoutput> 
    </table> 
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="scripts/pStrength.jquery.js"></script> 
    <script> 
    $(document).ready(function(){ 

     $('#myForm').submit(function(){ 
      return false; 
     }); 

     $('#myElement1, #myElement2').pStrength({ 
      'changeBackground'   : false, 
      'onPasswordStrengthChanged' : function(passwordStrength, strengthPercentage) { 
       if ($(this).val()) { 
        $.fn.pStrength('changeBackground', this, passwordStrength); 
       } else { 
        $.fn.pStrength('resetStyle', this); 
       } 
       $('#' + $(this).data('display')).html('Your password strength is ' + strengthPercentage + '%'); 
      }, 
      'onValidatePassword': function(strengthPercentage) { 
       $('#' + $(this).data('display')).html(
        $('#' + $(this).data('display')).html() + ' Great, now you can continue to change your password!' 
       ); 

       $('#myForm').submit(function(){ 
        return true; 
       }); 
      } 
     }); 
    }); 
    </script> 
    <cfinclude template="footer.cfm"> 

由於在事先

Answer 1

因爲你不刪除其他提交的事件，你只是追加到它。

這不會覆蓋您之前定義的返回錯誤版本。

$('#myForm').submit(function(){ 
    return true; 
}); 

你要麼需要將其刪除

$('#myForm').off("submit").submit(function(){ 
    return true; 
}); 

或更好，但不分配一個新的功能，使用布爾值。

var isValid = false; 
$('#myForm').submit(function(){ 
    return isValid; 
}); 

並在驗證檢查中，將其設置爲true或false。