密码强度检查器
[英]Password Strength Checker
问题描述
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. 我想我在JavaScript中遇到“ addClass”问题。 Here is the code... 这是代码...
html: 的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: 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: 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
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 . 因为你用ID ，比适用于类的CSS，但id不止功率class比使用ID和类此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>
解决方案2
0 已采纳 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. 您已为span元素的id提供了颜色。Id属性的优先级高于class属性，因此未将颜色分配给结果。
You can add class to the <span> element and give color to that class. 您可以将类添加到<span>元素，并为该类赋予颜色。
You can see demo here http://jsfiddle.net/tenigada/RH8f6/575/ 您可以在此处查看演示http://jsfiddle.net/tenigada/RH8f6/575/
解决方案3
0 2017-02-18 09:33:27
i have found this it may help you i have implement using javascript 我发现这可以帮助您使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery 密码强度检查器 - jQuery password strength checker
jQuery密码强度检查器问题 - Jquery password strength checker issue
Jquery 密码强度检查器代码改进 - Jquery password strength checker code improvment
Javascript 中的密码强度测试 - 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
密码强度 JavaScript - Password strength JavaScript
相关标签