0
我的密碼強度檢查器出現問題。 結果的顏色不會根據密碼的強度而改變。 我想我在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'
}
}
});
實行「有一個問題，我的密碼強度檢查。」 - 這不是你的CSS的問題，很可能不是你的HTML。 – intboolstring