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


Posted in Javascript onSeptember 21, 2017

本文实例讲述了JS基于正则表达式实现的密码强度验证功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 三水点靠木</title>
</head>
<style type="text/css">
  body {
    background: #ccc;
  }
  label {
    width: 40px;
    display: inline-block;
  }
  span {
    color: red;
  }
  .container {
    margin: 100px auto;
    width: 400px;
    padding: 50px;
    line-height: 40px;
    border: 1px solid #999;
    background: #efefef;
  }
  span {
    margin-left: 30px;
    font-size: 12px;
  }
  .wrong {
    color: red
  }
  .right {
    color: green;
  }
  .strengthLv0 {
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv1 {
    background: red;
    height: 6px;
    width: 40px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv2 {
    background: orange;
    height: 6px;
    width: 80px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  .strengthLv3 {
    background: green;
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
</style>
<body>
<div class="container">
  <label>密码</label>
  <input type="text" id="inp1" maxlength="16">
  <!--<input type="password" id="inp1" maxlength="16"/>-->
  <div class="pass-wrap">
    <em>密码强度:</em>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>
<script>
  var regEx = /^[1-9]\d{4,9}$/; //匹配qq号
  //找人
  var inp1 = document.getElementById("inp1");
  var strength = document.getElementById("strength");
  var strengthLevel = document.getElementById("strengthLevel");
  var arr = ["", "低", "中", "高"];
  inp1.onkeyup = function () {
    var level = 0;
    if (/[1-9]/.test(this.value)) {
      level++;
    }
    if (/[a-z]/.test(this.value)) {
      level++;
    }
    if (/[^a-z1-9]/.test(this.value)) {
      level++
    }
    if (this.value.length < 6) {
      level = 0;
    }
    strength.innerHTML = arr[level];
    strengthLevel.className = "strengthLv" + level;
  };
  /* inp1.onkeyup = function () {
   var level = 0;
   if (/[1-9]/.test(this.value)) {
   level++;
   }
   if (/[a-z]/.test(this.value)) {
   level++
   }
   if (/[^a-z0-9]/.test(this.value)) {
   level++
   }
   if (inp1.value.length < 6) {
   level = 0;
   }
   strengthLevel.className = "strengthLv"+level;
   strength.innerHTML = arr[level];
   };*/
</script>
</body>
</html>
Javascript 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
JS动画定时器知识总结
Mar 23 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
js实现div色块碰撞
Jan 16 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
详解react服务端渲染(同构)的方法
Sep 21 #Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 #Javascript
删除table表格行的实例讲解
Sep 21 #Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 #Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 #Javascript
详解JavaScript中的六种错误类型
Sep 21 #Javascript
You might like
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php中使用sftp教程
2015/03/30 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
django模板语法学习之include示例详解
2017/12/17 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
写给女生的道歉信
2014/01/14 职场文书
创业资金计划书
2014/02/06 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
大学社团活动总结
2014/04/26 职场文书
创先争优演讲稿
2014/09/15 职场文书
小数乘法教学反思
2016/02/22 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python