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 相关文章推荐
jQuery each()小议
Mar 18 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
JS实现使用POST方式发送请求
Aug 30 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测试硬盘写入速度示例
2014/01/27 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
菜单效果
2006/10/14 Javascript
插件:检测javascript的内存泄漏
2007/03/04 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python多线程实现TCP服务端
2019/09/03 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
英语专业个人求职自荐信
2013/09/21 职场文书
销售找工作求职信
2013/12/20 职场文书
学生鉴定评语大全
2014/05/05 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
2015年中秋寄语
2015/07/31 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js