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文档资料都上传到网盘了,来帮助大家一起成长。”

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180106A079SI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券