个人中心
gpt4 book ai didi

javascript - 密码强度检查器

转载 作者：行者123 更新时间：2023-11-28 06:37:55 26 4
gpt4 key购买 nike

我的密码强度检查器有问题。结果的颜色不会根据密码的强度而改变。我想我对 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'
}
}
});

最佳答案

我找到了this它可以帮助你我已经使用 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)(?=.*[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;
}
		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>

关于javascript - 密码强度检查器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34523399/

26 4 0
文章推荐： javascript - jQuery Effect导致button不被div包围
文章推荐： c++ - 通过重复的操作序列简化 GTest 用例
文章推荐： c++ - 连接传感器后，Arduino 驱动的伺服电机停止工作
文章推荐： javascript - 通过 CSS 实现多 Pane 滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com