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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
详解vue渲染函数render的使用
Dec 12 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
Vue分页器实现原理详解
Jun 28 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编码规范-php coding standard
2007/03/16 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
用ADODB.Stream转换
2007/01/22 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
使用python分析git log日志示例
2014/02/27 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python实现excel转sqlite的方法
2017/07/17 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
保密工作实施方案
2014/02/24 职场文书
房地产促销活动方案
2014/03/01 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
教师个人培训总结
2015/02/11 职场文书
纪委立案决定书
2015/06/24 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏
python实现商品进销存管理系统
2022/05/30 Python