密碼強度檢查器
[英]Password Strength Checker
問題描述
我的密碼強度檢查器有問題。 結果的顏色不會根據密碼的強度而改變。 我想我在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 個解決方案
解決方案1
0 2015-12-30 05:28:10
習慣了這個
#result.red{color:red;}
#result.orange{color:orange;}
#result.green{color:green;}
因為你用ID ，比適用於類的CSS，但id不止功率class比使用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(/([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>
解決方案2
0 已采納 2015-12-30 06:07:40
您已為span元素的id提供了顏色。Id屬性的優先級高於class屬性，因此未將顏色分配給結果。
您可以將類添加到<span>元素，並為該類賦予顏色。
您可以在此處查看演示http://jsfiddle.net/tenigada/RH8f6/575/
解決方案3
0 2017-02-18 09:33:27
我發現這可以幫助您使用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>
jQuery 密碼強度檢查器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.