JS 密码强度校验的正则表达式(简单且好用)

转载  发布时间:2017年01月16日 09:29:39   投稿:mrr   我要评论

最近在做一个通行证的项目,在项目中有这样的需求,注册模块中输入密码需要显示密码强度,今天小编给大家分享JS 密码强度校验的正则表达式,简单好用,需要的朋友参考下

最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高)。今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求。

html 代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>密码强度</title>
  <style type="text/css">
  #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 type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('pass','passStrength');
</script>

js 代码如下:

function PasswordStrength(passwordID,strengthID){
  this.init(strengthID);
  var _this = this;
  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)。

以上所述是小编给大家介绍的JS 密码强度校验的正则表达式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • PHP正则表达式完全教程之提高篇

    PHP正则表达式完全教程之提高篇

    正则表达式,大家在开发中应该是经常用到,现在很多开发语言都有正则表达式的应用,比如javascript,java,.net,php等等,我今天就把我对正则表达式的理解跟大家唠唠,不当之处,请多多指教!
    2015-09-09
  • JavaScript 中的正则表达式(推荐)

    JavaScript 中的正则表达式(推荐)

    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式(推荐),感兴趣的朋友一起学习吧
    2016-05-05
  • 正则表达式\d元字符(相对于数字0-9)

    正则表达式\d元字符(相对于数字0-9)

    正则表达式\d元字符,\d元字符可以匹配数字字符,等价于[0-9],在实际应用中还是比较常见的,主要是针对数字的处理
    2016-12-12
  • RegExp对象的方法和属性

    RegExp对象的方法和属性

    RegExp对先看整个字符串是不是匹配,如果没有发现匹配,先去掉最后字符串中的最后一个字符,并再次尝试,如果还没有发现匹配,那么再次去掉最后一个字符,这个过程会一直重复下去直到发现匹配或不剩任何字符串,上面的简单量词都是贪婪量词。
    2008-06-06
  • javascript下正则匹配百分比的代码

    javascript下正则匹配百分比的代码

    javascript下正则匹配百分比的代码...
    2007-08-08
  • Python 中文正则表达式笔记

    Python 中文正则表达式笔记

    总结在 python 语言里使用正则表达式匹配中文的经验。
    2010-07-07
  • 正则表达式、分组、子匹配(子模式)、非捕获子匹配(子模式)

    正则表达式、分组、子匹配(子模式)、非捕获子匹配(子模式)

    前面我们知道正则表达式有很多元字符表示匹配次数(量词),都是可以重复匹配前面出现的单个字符次数,需要的朋友可以参考下
    2016-06-06
  • 密码强度的正则表达式两种方案JS总结篇

    密码强度的正则表达式两种方案JS总结篇

    本文给出了两个密码强度的正则表达式方案,一个简单,一个更复杂和安全。并分别给出了两个方案的解析和测试程序。对密码强度正则表达式的两种方案感兴趣的朋友跟随脚本之家一起看看吧
    2018-03-03
  • 正则表达式简介及在C++11中的简单使用教程

    正则表达式简介及在C++11中的简单使用教程

    正则表达式(regular expression)是计算机科学中的一个概念,又称规则表达式,通常简写为regex、regexp、RE、regexps、regexes、regexen。接下来通过本文给大家介绍正则表达式简介及在C++11中的简单使用教程,一起通过本文学习吧
    2017-02-02
  • javascript正则表达式基础篇

    javascript正则表达式基础篇

    这篇文章主要是介绍javascript正则表达式的一些基础知识,主要是介绍javascript的正则书写方法与常用实例,需要的朋友可以参考下
    2013-02-02

最新评论