编程 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的一些总结

Nov 03 Javascript

JS 时间显示效果代码

Aug 23 Javascript

js判断一个元素是否为另一个元素的子元素的代码

Mar 21 Javascript

js 限制input只能输入数字、字母和汉字等等

Dec 18 Javascript

javascript实现时间格式输出FormatDate函数

Jan 13 Javascript

Node.js自定义实现文件路由功能

Sep 22 Javascript

原生js实现form表单序列化的方法

Aug 02 Javascript

使用JS代码实现俄罗斯方块游戏

Aug 03 Javascript

vue slot与传参实例代码讲解

Apr 28 Javascript

vue-cli3中vue.config.js配置教程详解

May 29 Javascript

详解vue中v-on事件监听指令的基本用法

Jul 22 Javascript

解决VantUI popup 弹窗不弹出或无蒙层的问题

Nov 03 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