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>

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

赞 (0)

相关推荐

  • js验证密码强度解析

    这篇文章我们来说一个验证密码强度的例子,大家在进入一个网站的时候,往往都会先注册一个账号,然后输入密码,在输密码的时候,系统会根据我们输入的密码组成的复杂程度来给你的密码显示一个密码强度,一般就是强中弱三种,我们先来说一下密码验证的原理,原理明白了,js代码就好写了,今天的代码会用到正则表达式. 首先说一下密码强度的三种等级是如何划分的? 弱:一般就是纯数字或纯小写字母或者纯大写字母组成的,这种密码较简单,所以安全等级为弱. 中:由上述情况中的任意两种组成的密码强度为中. 强:上述三种情况都有.

  • js如何验证密码强度

    验证"密码强度"的例子很常见,我们注册新的账号的时候往往设置密码,此时就遇到验证密码强度的问题了."密码强度"也就是密码难易程度的意思. 原理: 1.如果输入的密码为单纯的数字或者字母:提示"低" 2.如果是数字和字母混合的:提示"中" 3.如果数字.字母.特殊字符都有:提示"强" 下面是一种"密码强度"的验证方法,觉得很有意思. HTML和CSS代码: <!DOCTYPE HTM

  • JavaScript实现密码强度实时验证

    JavaScript实现密码强度实时验证,供大家参考,具体内容如下 在网络服务中,为了保证用户的私密信息足够安全,会要求用户输入具有一定安全级别的密码,这样可以更好的防止他人盗用.比如在注册一些游戏账号时,如果输入纯数字或纯英文字符低于6位,就会提示密码强度太低,请重新输入.一些密码强度验证的方法都是计算字符的类型,然后分类加权累算.权重越高,相应的强度也就越高. 具体的写法及实现方式有很多种,本文只介绍其中一种方案 <!DOCTYPE html> <html lang="en

  • JS正则表达式验证密码强度

    本文实例为大家分享了JS正则表达式验证密码强度的具体代码,供大家参考,具体内容如下 代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> #dv{ width:

  • 密码强度的正则表达式两种方案JS总结篇

    本文给出了两个密码强度的正则表达式方案,一个简单,一个更复杂和安全.并分别给出了两个方案的解析和测试程序.一般大家可以根据自己的项目的实际需要,自行定义自己的密码正则约定. 前言 用户注册时,都会用到密码正则校验.要写出正确的正则表达式,先要定义表达式规则. 方案1 (简单) 假设密码验证做如下规则定义: 最短6位,最长16位 {6,16} 可以包含小写大母 [a-z] 和大写字母 [A-Z] 可以包含数字 [0-9] 可以包含下划线 [ _ ] 和减号 [ - ] 根据以上规则,很容易给出正则

  • 原生js实现密码强度验证功能

    我们在填写表单的时候,特别是输入密码的时候,经常看到实时显示密码强度的效果,那么这种效果如何通过我们的原生js实现呢? 思路: 1.密码通常是由数字,大写字母,小写字母以及特殊字符组成 2.密码全部是纯数字或者纯大写字母,或者纯小写字母,我们认为是密码强度较低 3.密码由两种混合,我们认为密码强度是中等的 4.密码由三种或者四种混合,我们认为这样的密码组合强度很强 5.通过判断输入的密码每个字符,如果是数字返回1:如果是大写字母,返回2:如果是小写字母,返回4:如果是特殊字符,则返回8(至于为什

  • js正则表达式验证密码强度【推荐】

    js正则表达式验证密码强度【推荐】

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证密码强度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400

  • js密码强度实时检测代码

    js密码强度实时检测代码

    密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情, 不同的网站, 实现的方式是不一样的. 密码的判断, 其实也就是一个表单验证的其中一项. 那我们来实现这么一个简单的操作. 首先做一个简单的密码输入框和一个显示密码强度的进度条. 整个整体由vali_pass盒子涵盖. 这个盒子包含了标题, 密码框. 再个就是强度进度条. <div class="vali_pass"> <h3>简单的密码强度检测</h3> <input type=

  • js检测用户输入密码强度

    js检测用户输入密码强度

    一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱. 2. 如果输入的密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则判定为弱. 3. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的两种组成,则判定为中. 4. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的三种以上组成,则判定为强. 先来看看这个实现的效

  • javascrpt密码强度校验函数详解

    最近写了个密码强度验证的函数,主要验证以下内容 1.密码最小和最大长度 2.连续字符串出现的次数 3.字符连续出现的次数 4.禁止特定的字符串作为密码 5.密码字符串的组合强度要求,必须含有大小写字母,必须含有数字,必须含有特殊字符 6.输入密码必须与确认密码一致 7.支持禁止使用用户名作为密码 8.是否存在连续性的字符串,是否存在逆序性的字符串 (function(window, verifyPwd){ window.verifyPwd = { /*最小长度*/ minLength : 6 /

随机推荐