全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

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


# js密码强度正则表达式  # 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等  # Javascript校验密码复杂度的正则表达式  # js正则表达式校验指定字符串的方法  # Web 前端常用正则校验规则整理(常用示例)  # 前端使用正则表达式进行校验的方法总结大全  # 给大家  # 小编  # 第一个  # 在此  # 就把  # 第二个  # 自定义  # 所述  # 给我留言  # 感谢大家  # 输入框  # 输入密码  # 疑问请  # 有任何  # 网上  # 正则表达式  # solid  # ccc  # border  # passStrength 


相关文章: 儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册?  电商网站制作价格怎么算,网上拍卖流程以及规则?  购物网站制作费用多少,开办网上购物网站,需要办理哪些手续?  上海网站制作开发公司,上海买房比较好的网站有哪些?  制作网站怎么制作,*游戏网站怎么搭建?  网站设计制作公司地址,网站建设比较好的公司都有哪些?  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛,就是里面都是武汉人的?  动图在线制作网站有哪些,滑动动图图集怎么做?  如何用IIS7快速搭建并优化网站站点?  如何确认建站备案号应放置的具体位置?  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站?  网站制作培训多少钱一个月,网站优化seo培训课程有哪些?  零服务器AI建站解决方案:快速部署与云端平台低成本实践  建站主机数据库如何配置才能提升网站性能?  如何在宝塔面板中创建新站点?  如何快速搭建FTP站点实现文件共享?  制作网站的过程怎么写,用凡科建站如何制作自己的网站?  较简单的网站制作软件有哪些,手机版网页制作用什么软件?  非常酷的网站设计制作软件,酷培ai教育官方网站?  韩国服务器如何优化跨境访问实现高效连接?  如何用已有域名快速搭建网站?  大型企业网站制作流程,做网站需要注册公司吗?  成都品牌网站制作公司,成都营业执照年报网上怎么办理?  如何快速生成橙子建站落地页链接?  如何打造高效商业网站?建站目的决定转化率  建站之星如何修改网站生成路径?  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情?  如何选择适配移动端的WAP自助建站平台?  建站主机选购指南:核心配置与性价比推荐解析  如何彻底卸载建站之星软件?  焦点电影公司作品,电影焦点结局是什么?  Swift中switch语句区间和元组模式匹配  阿里云网站制作公司,阿里云快速搭建网站好用吗?  如何用PHP工具快速搭建高效网站?  如何在阿里云通过域名搭建网站?  如何在Golang中指定模块版本_使用go.mod控制版本号  在线制作视频的网站有哪些,电脑如何制作视频短片?  ,网页ppt怎么弄成自己的ppt?  交易网站制作流程,我想开通一个网站,注册一个交易网址,需要那些手续?  如何选购建站域名与空间?自助平台全解析  台州网站建设制作公司,浙江手机无犯罪记录证明怎么开?  建站之星导航如何优化提升用户体验?  建站168自助建站系统:快速模板定制与SEO优化指南  宝塔Windows建站如何避免显示默认IIS页面?  北京企业网站设计制作公司,北京铁路集团官方网站?  如何快速查询网站的真实建站时间?  移民网站制作流程,怎么看加拿大移民官网?  常州自助建站工具推荐:低成本搭建与模板选择技巧  阿里云网站搭建费用解析:服务器价格与建站成本优化指南  Python如何创建带属性的XML节点 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。