密码强度检查器

时间:2015-12-30 05:23:58

标签: javascript html css

我的密码强度检查器有问题。 结果的颜色不会根据密码的强度而改变。 我想我在javascript中遇到“addClass”问题。 这是代码......

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 个答案:

答案 0 :(得分:0)

习惯了这个

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

因为您曾经使用ID而不是申请css类,但idclass的权力高于ID以及css的权力$(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' } } });

演示代码

  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>
usuario_cidade

答案 1 :(得分:0)

您为span元素的id提供了颜色.Id属性的优先级高于class属性,因此颜色不会分配给结果。

您可以将类添加到<span>元素并为该类提供颜色。

您可以在此处查看演示http://jsfiddle.net/tenigada/RH8f6/575/

答案 2 :(得分:0)

我发现this它可以帮助您实现使用javascript

&#13;
&#13;
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)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
    //  document.getElementById("pass_veri").style.display="block";
    var fletter = /[a-z]/;
    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 = /[A-Z]/;
    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;
}
&#13;
		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;
		}
&#13;
<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>
&#13;
&#13;
&#13;