一个比较简单的JQUERY密码安全性验证实例【补充】

最新推荐文章于 2022-07-15 11:56:51 发布

浙外

最新推荐文章于 2022-07-15 11:56:51 发布

阅读量1.2k

点赞数

分类专栏： ASP.NET 文章标签： javascript 正则表达式 jquery

本文链接：https://blog.csdn.net/caileyi/article/details/35990549

版权

ASP.NET 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

现在关于密码安全性级别的验证比较常见，主要就是使用了JS和正则表达式的一些功能，下面就是网上找来的一个比较简单验证实例，做个说明。

<!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>
<title>用户密码安全级别验证</title>
<!--以下的6个样式分别对应了6个级别的安全性格式-->
<style type="text/css">
    #levelMSG{width:200px;height:15px;border:#000000 1px solid;font-size:12px;}
    .password0 {background:#FF0000;}
    .password1 {background:#FF9900;}
    .password2 {background:#FFFF00;}
    .password3 {background:#CCFF00;}
    .password4 {background:#00FF00;}
    .password5 {background:#0000FF;}
</style>
</head>
<body>
密码:<input type="text" id="password" name="password" />
<div id="levelMSG" class="password0"></div><!--这个DIV就是用来显示安全性级别判断信息的-->
<script type="text/javascript" src="Scripts/jquery.js"></script><!--这个JS是JQUERY库函数文件，因为下面要用到JQUERY的一些函数方法-->
<script type="text/javascript">
function check() {
    var level = getPasswordSecurityLevel($("#password").val());
    jQuery("#levelMSG").removeClass().addClass("password"+level) .html("级别："+level);//这里是JQUERY用法，表示将ID为levelMSG的DIV去掉原样式，添加新样式，并设置内容
}
function getPasswordSecurityLevel(password){ 
return 0 //这里要注意，并不是直接就return了，而是0+后面的值。 
//密码长度大于5位 
+( password.length > 5 ) 
//密码含有字母 
+( /[a-zA-Z]/.test(password)) 
//密码含有字母和数字 
+( /\d/.test(password)) 
//密码含有特殊字符 
+( /[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/.test(password)) 
//密码长度大于12位 
+( password.length > 12 );
}
jQuery(function(){
 jQuery("#password").bind('keyup', check).bind('blur', check);
//这里是JQUERY用法，表示将ID为PASSWORD的文本框绑定到两个事件：keyup和blur
});
</script>
</body>
</html>