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 密码强度校验的正则表达式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript 正则表达式 验证整数、小数、实数、有效位小数最简单

    说明:IE6.0.IE7.0.IE8.0.Firefox/3.0.11下测试通过 验证数字最简单正则表达式大全 输入完按回车后即可验证!(自认为最简单!) 正整数: 负整数: 整 数: 正小数: 负小数: 小 数: 实 数: 保留1位小数: 保留2位小数: 保留3位小数: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 出处:http://blog.csdn.net/xxd851116

  • JavaScript 表单验证正则表达式大全[推荐]

    具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?

  • 正则匹配密码只能是数字和字母组合字符串功能【php与js实现】

    本文实例讲述了正则匹配密码只能是数字和字母组合字符串功能.分享给大家供大家参考,具体如下: 密码要求: 1. 不能全部是数字 2. 不能全部是字母 3. 必须是数字和字母组合 4. 不包含特殊字符 5. 密码长度6-30位的字符串 /** * @desc get_pwd_strength()im:根据密码字符串判断密码结构 * @param (string)$mobile * return 返回:$msg */ function get_pwd_strength($pwd){ if (strle

  • JS利用正则表达式实现简单的密码强弱判断实例

    JS利用正则表达式实现简单的密码强弱判断实例

    实现功能: 1.输入字符要在6-16之间:小于6个字符或大于16个字符时给予提示,而且强弱不显示:为0时,也给予提示: 2.当密码在6-16个字符之间时,如果密码全是数字或全是字母,显示弱:密码是数字与字母的组合,则显示强:若为字母数字加下划线,则为强: 效果图如下:  代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

  • JS正则表达式验证密码格式的集中情况总结

    1.密码必须为6-18位字母.数字.特殊符号的: var reg =/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{6,18}$/; 2.密码必须为6-18位字母.数字 var reg=/^(?![^a-zA-Z]+$)(?!\D+$)/ 3.支持字母.数字.标点符号.特殊字符 var reg=/^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])|(?=.*[A-Z])(?

  • js正则表达式验证密码强度【推荐】

    js正则表达式验证密码强度【推荐】

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证密码强度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400

  • Javascript校验密码复杂度的正则表达式

    Javascript校验密码复杂度的正则表达式

    目前使用的正则表达式如下: 复制代码 代码如下: (?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30} 对应的验证规则是:密码中必须包含字母.数字.特称字符,至少8个字符,最多30个字符. 这个正则表达式在C#可以正常使用,但是在Javascript中却有问题. 请问是在js中如何写这样的正则表达式? 测试字符串:a123456- 解决方法如下所示: 把\d改为[0-9]问题就解决了,正则表达式如下: 复制代码 代码如下: var regex = new

  • js正则实现的密码框简单制作,还可以替换成自己想用得符号

    密码框简单制作,还可以替换成自己想用得符号. <style type="text/css"> #c { position: relative; } #a { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; } #b { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; -moz-opacit

  • JS基于正则表达式实现的密码强度验证功能示例

    JS基于正则表达式实现的密码强度验证功能示例

    本文实例讲述了JS基于正则表达式实现的密码强度验证功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> </head> <style type="text/cs

  • JS正则表达式验证数字代码

    复制代码 代码如下: <script type="text/javascript">     function validate(){       var reg = new RegExp("^[0-9]*$");       var obj = document.getElementById("name");    if(!reg.test(obj.value)){        alert("请输入数字!");

  • 用户名、密码等15个常用的js正则表达式

    收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则.表单验证处理必备. 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("iFat3"

随机推荐