オンザフライでパスワードルールを確認する

Question

私はユーザー登録フォームを持っており、ユーザーはパスワードを入力する必要があります。私は8文字、数字と大文字などを含む必要があるようないくつかのパスワードルールを持っています。

入力時にユーザーがパスワードの基準を満たしているかどうかを表示し、小さなポップアップなどで表示できますか？

現在、私は彼がこれらの基準（のような8つの文字、1アッパーケースと1桁）を満たした場合にのみ、目盛りを示してコードをしました

<td> 
      <table><tr> 
       <td> 
       <input type="password" name="password" 
       size="25" tabindex="<%= get_next_tabindex(@content_data) %>" 
       value="<%= @content_data['password'] %>" 
       onKeyUp="validatePassword(this)"> 
      </td> 
      <td id="password_Valid_Image" style="display:none"> 
      <%= image_tag(
       "/assets/20/tick-icon.png", 
       :alt => "") %> 
      </td> 
       </tr> 
      </table> 
      </td> 

var is_Password_Valid = false; 
var lower_Case = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]; 
var upper_Case = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"] 
var numbers = [1,2,3,4,5,6,7,8,9,0] 

function validatePassword(password_Input){ 
    is_Password_Valid = true; 

    if(password_Input.value.length < 8){ 
    is_Password_Valid = false; 
    drawPasswordValid(is_Password_Valid); 
    return; 
    } 

    var found_Chars = 0; 

    for(var i=0; i<lower_Case.length; i++){ 
     if(password_Input.value.indexOf(lower_Case[i]) > -1){ 
     found_Chars++; 
     } 
    } 

    if(found_Chars == 0){ 
    is_Password_Valid = false; 
    drawPasswordValid(is_Password_Valid); 
    return; 
    } 

    found_Chars = 0; 

    for(var i=0; i<upper_Case.length; i++){ 
     if(password_Input.value.indexOf(upper_Case[i]) > -1){ 
     found_Chars++; 
     } 
    } 

    if(found_Chars == 0){ 
    is_Password_Valid = false; 
    drawPasswordValid(is_Password_Valid); 
    return; 
    } 

    found_Chars = 0; 

    for(var i=0; i<numbers.length; i++){ 
     if(password_Input.value.indexOf(numbers[i]) > -1){ 
     found_Chars++; 
     } 
    } 

    if(found_Chars == 0){ 
    is_Password_Valid = false; 
    drawPasswordValid(is_Password_Valid); 
    return; 
    } 

    drawPasswordValid(is_Password_Valid); 

    } 

Answer 1

上を見てみましょう既存のjQueryプラグイン：10 Password Strength Meter Scripts For A Better Registration Interface

function check(str) { 

    var length = new RegExp('^[\\d\\w]{6,}$'); 
    var digit = new RegExp('[\\d]+'); 
    var upper = new RegExp('[A-Z]+'); 

    return length.test(str) && digit.test(str) && upper.test(str); 

} 

alert(check('asasasA77')); 

コード：http://jsfiddle.net/wYDej/1/

Answer 2

あなたは強度計を探していないと、あなただけのユーザーにいくつかの情報を表示したい場合は、jQueryのバブルポップアップをチェックアウト：http://www.vegabit.com/jquery_bubble_popup_v2/