简单的密码强度插件_html/css_WEB-ITnose
程序员文章站
2022-04-01 14:55:07
...
之前做的通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高)。当然这只是一个很简单的密码强度显示功能,不像网上那么复杂,能够满足一般的需求。
function PasswordStrength(passwordID,strengthID){ var _this = this; _this.init(strengthID); document.getElementById(passwordID).onkeyup = function(){ _this.checkStrength(this.value); }}PasswordStrength.prototype.init = function(strengthID){ var id = document.getElementById(strengthID); var div = document.createElement('div'); var strong = document.createElement('strong'); this.oStrength = id.appendChild(div); this.oStrengthTxt = id.parentNode.appendChild(strong);}PasswordStrength.prototype.checkStrength = function (val){ var aLvTxt = ['','低','中','高']; var lv = 0; if(val.match(/[a-z]/g)){lv++;} if(val.match(/[0-9]/g)){lv++;} if(val.match(/(.[^a-z0-9])/g)){lv++;} if(val.length 3){lv=3;} this.oStrength.className = 'strengthLv' + lv; this.oStrengthTxt.innerHTML = aLvTxt[lv];}
参数说明
- 对象的第一个参数是密码输入框的 id,第二个参数是密码强度长条的 id;
- checkStrength方法中可以自定义密码强度的规则;
- 密码强度显示低中高分别对应 3 个 css 样式(strengthLv1、strengthLv2、strengthLv3)。
如何使用
密码强度 密码强度:
推荐阅读
-
PostCSS一种更优雅、更简单的书写CSS方式_html/css_WEB-ITnose
-
外挂级神器!内置700+免费字体直接用的PS插件FontTea_html/css_WEB-ITnose
-
问一个很简单的关于html代码的问题.标题要长!!!!!!!!_html/css_WEB-ITnose
-
免费下载:简单、优雅的现代风格界面工具包_html/css_WEB-ITnose
-
CSS3 实现的一个简单的"动态主菜单" 示例[转]_html/css_WEB-ITnose
-
还在为小三角形切图?使用纯CSS写一个简单的三角形_html/css_WEB-ITnose
-
简单了解CSS3的all属性_html/css_WEB-ITnose
-
MySql5.6使用validate password 插件加强密码强度的安装及使用方法
-
html5超简单的localStorage实现记住密码的功能实现
-
html5超简单的localStorage实现记住密码的功能实现