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导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
js微信支付实现代码
Dec 22 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 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 方便水印和缩略图的图形类
2009/05/21 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JsRender for object语法简介
2014/10/31 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
JPype实现在python中调用JAVA的实例
2017/07/19 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
为什么要使用servlet
2016/01/17 面试题
支教个人总结
2015/03/04 职场文书
2015年母亲节寄语
2015/03/23 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS