web前端JS检查密码插件，自动检测密码强度，附带源码

作者：可可君-全栈

最近我一个刚刚初入程序员行业的个同学请求我的帮助，要我帮他做一个密码强度的检查器。这不，最近刚刚加入小朱的博客网，也帮着一起建设起来，以后平时一些开发经验就在这里共享给大家啦。同时也欢迎各位高手加入,啦啦啦，好了，有点骚了。废话不多说…根据小朱同学的高质量要求….遵循本博客网的博文结构有图片,教程要详细。

首先-插件介绍

这是用来检测密码复杂度的一个小程序员，或者说是插件吧，很容易使用的。下面是复杂度等级图片,图片素材由小朱帮忙设计。

然后就使用到的了CSS Sprites来切图，也就是被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

在线运行中，可在输入框输入密码测试

使用方法：

1、在你的网站头部

head

标签里添加这段js代码，这是核心代码，复制检查密码复杂度的。

2、还需要加入css样式，同样的也是在网站头部的

head

标签里面添加如下代码

3、然后表单这样写,就成功啦！当然你可以自定义你的表单。

第二行的

class="rank r0"

表示默认密码复杂度为0级。

“对于前端学习有不懂的，或者遇到学习瓶颈，不知道学习方法，可以来我们头条前端群：592569448，小编整理了专业的JavaScript、jQuery、bootstrap、angularJS、react、nodejs等企业级框架项目实战，还有PDF文档资料都上传到网盘了，来帮助大家一起成长。”