search

Home >Web Front-end >HTML Tutorial >简单的密码强度插件_html/css_WEB-ITnose

简单的密码强度插件_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:53:231247browse

之前做的通行证项目，里面的注册模块中输入密码需要显示密码强度（低中高）。当然这只是一个很简单的密码强度显示功能，不像网上那么复杂，能够满足一般的需求。

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];}

参数说明

  1. 对象的第一个参数是密码输入框的 id，第二个参数是密码强度长条的 id；
  2. checkStrength方法中可以自定义密码强度的规则；
  3. 密码强度显示低中高分别对应 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>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：postMessage解决跨域、跨窗口消息传递_html/css_WEB-ITnoseNext article：火狐浏览器下表格边框神奇的bug请教！_html/css_WEB-ITnose

Related articles

See more