jQuery判断密码强度实现思路及代码
更新时间：2013年04月24日 15:58:39 作者：
实现思路为：密码小于六位的时候，密码强度图片都为灰色;密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度等等，感兴趣的朋友可以参考下哈
复制代码 代码如下:
<head>
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
.qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height:40px;float:left;}
.zhong{background:url(/images/pas3.JPG) no-repeat;width:150px;height:40px;float:left;}
.ruo{background:url(/images/pas2.JPG) no-repeat;width:150px;height:40px;float:left;}
.ruox{background:url(/images/pas1.JPG) no-repeat;width:150px;height:40px;float:left;}
.div1css{float:left;width:200px;}
</style>
<script type="text/javascript">
$(function () {
$('#pass').keyup(function () {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#div2').addClass('ruox');
//$('#passstrength').html('小于六位的时候'); //密码小于六位的时候，密码强度图片都为灰色
}
else if (strongRegex.test($(this).val())) {
$('#div2').removeClass('zhong');
$('#div2').addClass('qiang');
//$('#passstrength').html('强!'); //密码为八位及以上并且字母数字特殊字符三项都包括
}
else if (mediumRegex.test($(this).val())) {
$('#div2').removeClass('ruo');
$('#div2').addClass('zhong');
//$('#passstrength').html('中!'); //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
}
else {
$('#div2').removeClass('ruox');
$('#div2').addClass('ruo');
//$('#passstrength').html('弱!'); //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
}
return true;
});
})
</script>
</head>
<body>
<div id="div1" class="div1css">
<input type="password" name="pass" id="pass" /></div>
<div id="div2"><span id="passstrength"></span></div>
</body>
相关文章
这篇文章主要为大家详细介绍了纯js实现最简单的文件上传功能，后台使用MultipartFile，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
这篇文章主要介绍了antd项目如何实现彩蛋效果,首先在components目录下创建Transform目录，包括index.css、index.js，index.js是主要的逻辑代码，下面对代码进行分析，需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了原生JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
本文主要介绍了JavaScript this绑定与this指向问题的解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要给大家介绍了关于利用原生js实现trigger方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
下面小编就为大家带来一篇全面了解addEventListener和on的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
一起猜数字是微信一款休闲类小游戏,下面这篇文章主要给大家介绍了关于微信小程序实现猜数字小游戏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
uniapp踩坑实战之文件查找失败:'uview-ui' at main.js解决办法
这篇文章主要给大家介绍了关于uniapp踩坑实战之文件查找失败:'uview-ui' at main.js的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
本篇文章主要是对JavaScript定义类的几种方式进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了如何利用JavaScript纯前端实现在线GIF压缩工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
最新评论