编程 Javascript

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>

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

js判断密码强度的方法

- Author -

cometwo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript优化技巧（文件瘦身篇）

Jan 28 Javascript

jcrop基本参数一览

Jul 16 Javascript

JavaScript异步回调的Promise模式封装实例

Jun 07 Javascript

javascript将浮点数转换成整数的三个方法

Jun 23 Javascript

js表单处理中单选、多选、选择框值的获取及表单的序列化

Mar 08 Javascript

CKEditor无法验证的解决方案（js验证+jQuery Validate验证）

May 09 Javascript

js动态生成form 并用ajax方式提交的实现方法

Sep 09 Javascript

AngularJS中transclude用法详解

Nov 03 Javascript

在vue里面设置全局变量或数据的方法

Mar 09 Javascript

json数据传到前台并解析展示成列表的方法

Aug 06 Javascript

vue3.0 搭建项目总结(详细步骤)

May 20 Javascript

微信小程序之左右布局的实现代码

Dec 13 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