stackoom
  简体   繁体   中英

Password Strength Checker

 原文  2015-12-30 05:23:57  8   3    javascript/ html/ css

Question

i have a problem with my Password Strength checker. Color of the result doesn't change according to the strength of the password. I guess i have problem with "addClass" in javascript. Here is the code...

html: 

  <!DOCTYPE HTML>
   <html>
     <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <script src="jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />     
     <script src="script.js"></script>      
   </head>

    <body>
    <div id="container">
        <div id="content">  
            <form name="pass_strength">
            <p><label for="username">Username : </label>
                <input type="text" name="username" class="input"/>
            </p>
            <p><label for="password">Password : </label>
                <input type="password" name="password" id="password" class="input" />
                <span id="result"></span> 
           </p>
            </form>     
        </div>

       </div>
    </body>
</html>

css: 

      body
      { background-color:#CCC;}

    #container
     {
    width:20%;  
    background-color:#000;
    margin:0 auto;
    border:5px solid #FFF;
   margin-top:150px;
   }
   #content
   {
     padding:10px;
     border: 2px solid rgb(105, 91, 91);
     box-shadow: 2px 2px 10px #FFF;
     background: #CCC;
    }
 .input
 {
  margin:10px;
 }


 #result
 {
    color:#F00;
    text-shadow:#666;
 }

 a
 {
    color:#000;
 }

.red{color:red;}
.orange{color:orange;}
.green{color:green;}

JS: 

  $(document).ready(function() {

  $('#password').keyup(function(){
    $('#result').html(checkStrength($('#password').val()))
  })    

  function checkStrength(password){

  var strength = 0

  if (password.length < 6) { 
    $('#result').removeClass()
    $('#result').addClass('short green')
    return 'Too short' 
   }

  if (password.length > 7) strength += 1

  if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1

  if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 

  if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1

  if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1


if (strength < 2 ) {
    $('#result').removeClass()
    $('#result').addClass('weak')
    $('#result').addClass('green')
    return 'Weak'           
} else if (strength == 2 ) {
    $('#result').removeClass('green')
    $('#result').addClass('orange')
    return 'Good'       
} else {
    $('#result').removeClass('red')
    $('#result').removeClass('orange')
    $('#result').addClass('strong','green')
    return 'Strong'
}
}
});

3 answers

solution1
 0  2015-12-30 05:28:10

Used to this 

 #result.red{color:red;}
 #result.orange{color:orange;}
 #result.green{color:green;}

Because you used to ID and than apply to class css but id is more power than class than used to with ID and class this css .

Demo code 

 $(document).ready(function() { $('#password').keyup(function(){ $('#result').html(checkStrength($('#password').val())) }) function checkStrength(password){ var strength = 0 if (password.length < 6) { $('#result').removeClass() $('#result').addClass('short green') return 'Too short' } if (password.length > 7) strength += 1 if (password.match(/([az].*[AZ])|([AZ].*[az])/)) strength += 1 if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1 if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 if (strength < 2 ) { $('#result').removeClass() $('#result').addClass('weak'); $('#result').addClass('green'); return 'Weak' } else if (strength == 2 ) { $('#result').removeClass('green'); $('#result').addClass('orange'); return 'Good' } else { $('#result').removeClass('red'); $('#result').removeClass('orange'); $('#result').addClass('strong green'); return 'Strong' } } }); 
  body { background-color:#CCC;} #container { width:20%; background-color:#000; margin:0 auto; border:5px solid #FFF; margin-top:150px; } #content { padding:10px; border: 2px solid rgb(105, 91, 91); box-shadow: 2px 2px 10px #FFF; background: #CCC; } .input { margin:10px; } #result { color:#F00; text-shadow:#666; } a { color:#000; } #result.red{color:red;} #result.orange{color:orange;} #result.green{color:green;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="script.js"></script> </head> <body> <div id="container"> <div id="content"> <form name="pass_strength"> <p><label for="username">Username : </label> <input type="text" name="username" class="input"/> </p> <p><label for="password">Password : </label> <input type="password" name="password" id="password" class="input" /> <span id="result"></span> </p> </form> </div> </div> </body> </html>

solution2
 0 ACCPTED  2015-12-30 06:07:40

You have provided color to id of span element.Id attribute has an highest priority than class attribute so the color is not assigned to the result.

You can add class to the <span> element and give color to that class.

You can see demo here http://jsfiddle.net/tenigada/RH8f6/575/

solution3
 0  2017-02-18 09:33:27

i have found this it may help you i have implement using javascript 

 function password_validate(txt) { var val1 = 0; var val2 = 0; var val3 = 0; var val4 = 0; var val5 = 0; var counter, color, result; var flag = false; if (txt.value.length <= 0) { counter = 0; color = "transparent"; result = ""; } if (txt.value.length < 8 & txt.value.length > 0) { counter = 20; color = "red"; result = "Short"; } else { document.getElementById(txt.id + "error").innerHTML = " "; txt.style.borderColor = "grey"; var regex = /^(?=.*\\d)(?=.*[az])(?=.*[AZ])(?=.*[^a-zA-Z0-9])(?!.*\\s).{8,15}$/; // document.getElementById("pass_veri").style.display="block"; var fletter = /[az]/; if (fletter.test(txt.value)) { val1 = 20; } else { val1 = 0; } //macth special character var special_char = /[-!$%^&*()_+|~=`{}\\[\\]:";'<>?,.\\/]/; if (special_char.test(txt.value)) { val2 = 30; } else { val = 0; } /*capital_letter*/ var cap_lett = /[AZ]/; if (cap_lett.test(txt.value)) { val3 = 20; } else { val = 0; } /*one numeric*/ var num = /[0-9]/; if (num.test(txt.value)) { val4 = 20; } else { val4 = 0; } /* 8-15 character*/ var range = /^.{8,50}$/; if (range.test(txt.value)) { val5 = 10; } else { val5 = 0; } counter = val1 + val2 + val3 + val4 + val5; if (counter >= 30) { color = "skyblue"; result = "Fair"; } if (counter >= 50) { color = "gold"; result = "Good"; } if (counter >= 80) { color = "green"; result = "Strong"; } if (counter >= 90) { color = "green"; result = "Very Strong"; } } document.getElementById("prog").style.width = counter + "%"; document.getElementById("prog").style.backgroundColor = color; document.getElementById("result").innerHTML = result; document.getElementById("result").style.color = color; } 
  body { font-family: 'Rajdhani', sans-serif; background-color: #E4E4E4; } /* tooltip*/ .hint { width: 258px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position: absolute; left: 0px; border: 1px solid #CC9933; background-color: #FFFFCC; display: none; padding: 20px; font-size: 11px; } .hint:before { content: ""; position: absolute; left: 100%; top: 24px; width: 0; height: 0; border-top: 17px solid transparent; border-bottom: 1px solid transparent; border-left: 22px solid #CC9933; } .hint:after { content: ""; position: absolute; left: 100%; top: 26px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 1px solid transparent; border-left: 20px solid #FFFFCC; } .parent { position: relative; } .progress { height: 7px; } #progres { display: block; } p { margin: 0px; font-weight: normal; } .form-control { width: none; margin-left: 260px; margin-top: 25px; width: 200px; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group col-lg-12 parent "> <label class="hint" id="pass-hint"> Password Strength:<span id="result"></span> <br> <div class="progress" id="progres"> <div class="progress-bar progress-bar-danger" role="progressbar" id="prog"> </div> </div> <p> passowrd must have atleast 8 charatcer</p> </label> <input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********" oninput="password_validate(this);document.getElementById('progres').style.display='block';"> <i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i> <span id="passerror" class="help-block error"></span> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery password strength checker Jquery password strength checker issue Jquery password strength checker code improvment Password strength test in Javascript basic password strength validator Password Strength Meter Password strength script failed Password Strength Issue Regex for password strength not working Password strength JavaScript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM