Heim >Web-Frontend >HTML-Tutorial >简单的密码强度插件_html/css_WEB-ITnose
简单的密码强度插件_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:53:231245Durchsuche
之前做的通行证项目，里面的注册模块中输入密码需要显示密码强度（低中高）。当然这只是一个很简单的密码强度显示功能，不像网上那么复杂，能够满足一般的需求。
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 < 6){lv=0;} if(lv > 3){lv=3;} this.oStrength.className = 'strengthLv' + lv; this.oStrengthTxt.innerHTML = aLvTxt[lv];} 参数说明
- 对象的第一个参数是密码输入框的 id，第二个参数是密码强度长条的 id；
- checkStrength方法中可以自定义密码强度的规则；
- 密码强度显示低中高分别对应 3 个 css 样式（strengthLv1、strengthLv2、strengthLv3）。
如何使用
<!DOCTYPE HTML><html lang="en"><head> <meta charset="utf-8"/> <title>密码强度</title> <style> #passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;} .strengthLv1{background:red;height:6px;width:40px;} .strengthLv2{background:orange;height:6px;width:80px;} .strengthLv3{background:green;height:6px;width:120px;} </style></head><body> <input type="password" name="pass" id="pass" maxlength="16"/> <div class="pass-wrap"> <em>密码强度：</em> <div id="passStrength"></div> </div></body></html><script src="js/passwordStrength.js"></script><script>window.onload = function(){ new PasswordStrength('pass','passStrength');}</script> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：postMessage解决跨域、跨窗口消息传递_html/css_WEB-ITnoseNächster Artikel：火狐浏览器下表格边框神奇的bug请教！_html/css_WEB-ITnose