求一个判断密码强度的jquery代码
发布网友
发布时间：2022-04-22 05:18
共2个回答
热心网友
时间：2022-05-17 01:41
script.js
/*jQuery document ready.
*/
$(document).ready(function()
{
/*
assigning keyup event to password field
so everytime user type code will execute
*/
$('#password').keyup(function()
{
$('#result').html(checkStrength($('#password').val()))
})
/*
checkStrength is function which will do the
main password strength checking for us
*/
function checkStrength(password)
{
//initial strength
var strength = 0
//if the password length is less than 6, return message.
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
//length is ok, lets continue.
//if length is 8 characters or more, increase strength value
if (password.length > 7) strength += 1
//if password contains both lower and uppercase characters, increase strength value
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
//if it has numbers and characters, increase strength value
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
//if it has one special character, increase strength value
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
//if it has two special characters, increase strength value
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
//now we have calculated strength value, we can return messages
//if value is less than 2
if (strength < 2 )
{
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
}
else if (strength == 2 )
{
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
}
else
{
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});
index.php
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>How to check password strength using jQuery</title>
<!--jQuery Library-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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="header">
<h2>Password Strength Checking with jQuery<h2>
</div>
<div id="content">
<!-- form start-->
<form id="register">
<label for="password">Password : </label>
<input name="password" id="password" type="password"/>
<span id="result"></span>
</form>
<!-- form end-->
</div>
</div>
</body>
</html>
