js判断密码强度的方法


Posted in Javascript onMarch 18, 2020

本文实例为大家分享了js判断密码强度的具体代码,供大家参考,具体内容如下

js判断密码强度的方法

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>密码强度检测</title>
    <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
    <style type="text/css">
      body {
        font: 12px/1.5 Arial;
      }

      input {
        float: left;
        font-size: 12px;
        width: 150px;
        font-family: arial;
        padding: 3px;
        border: 1px solid black;
      }

      input.error {
        border: 1px solid red;
      }

      #tips {
        float: left;
        margin: 2px 0 0 20px;
      }

      #tips span {
        float: left;
        width: 50px;
        height: 20px;
        color: white;
        background: green;
        margin-right: 2px;
        line-height: 20px;
        text-align: center;
      }
    </style>

    <script type="text/javascript">
      $(function() {
        var aStr = ["弱", "中", "强", "牛逼"];

        function checkStrong(val) {
          var modes = 0;
          if (val.length < 6) return 0;
          if (/\d/.test(val)) modes++; //数字
          if (/[a-z]/.test(val)) modes++; //小写
          if (/[A-Z]/.test(val)) modes++; //大写 
          if (/\W/.test(val)) modes++; //特殊字符
          if (val.length > 12) return 4;
          return modes;
        };
        $(":text").keyup(function() {
          var val = $(this).val();
          $("p").text(val.length);
          var num = checkStrong(val);
          switch (num) {
            case 0:
              break;
            case 1:
              $("#tips span").css('background', 'yellow').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
              break;
            case 2:
              $("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
              break;
            case 3:
              $("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
              break;
            case 4:
              $("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
              break;
            default:
              break;
          }
        })
      })
    </script>
  </head>

  <body>
    <input type="text" value="" maxlength="16" />
    <div id="tips"><span></span><span></span><span></span><span></span></div>
    <p></p>
  </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 #Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 #Javascript
JavaScript正则表达式验证登录实例
Mar 18 #Javascript
JS正则表达式验证密码强度
Mar 18 #Javascript
原生js实现密码强度验证功能
Mar 18 #Javascript
JavaScript实现密码强度实时验证
Mar 18 #Javascript
js如何验证密码强度
Mar 18 #Javascript
You might like
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
javascript数据类型详解
2017/02/07 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python障碍式期权定价公式
2019/07/19 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
女娲补天教学反思
2014/02/05 职场文书
趣味体育活动方案
2014/02/08 职场文书
班级体育活动总结
2014/07/05 职场文书
财务部会计岗位职责
2015/02/03 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle