<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>用户密码安全级别验证</title>
<meta content="用户密码安全级别验证" name="keywords" />
<meta content="用户密码安全级别验证" name="description" />
<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<style type="text/css">
.password0 {background:#FF0000;}
.password1 {background:#FF9900;}
.password2 {background:#FFFF00;}
.password3 {background:#CCFF00;}
.password4 {background:#00FF00;}
.password5 {background:#0000FF;}
</style>
</head>
<body>
<label for="password">密码:</label><input type="text" id="password" name="password" /><p id="cp" class="password0"></p>
<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function getPasswordSecurityLevel(password){
return 0
//密码长度大于5位
+( password.length > 5 )
//密码含有字母
+( /[a-z]/.test(password) && /[A-Z]/.test(password) )
//密码含有字母和数字
+( /\d/.test(password) && /\D/.test(password) )
//密码含有特殊字符
+( /[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/.test(password) && /\w/.test(password) )
//密码长度大于12位
+( password.length > 12 );
}
function check() {
var level = getPasswordSecurityLevel($("#password").val());
jQuery("#cp").removeClass().addClass("password"+level) .html("密码安全级别："+level);
}
jQuery(function(){
jQuery("#password").bind('keyup', check).bind('blur', check);
});
</script>
</body>
</html>
效果图
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
