本文实例为大家分享了jQuery密码强度验证控件，供大家参考，具体内容如下

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <style type="text/css">
      .mainPrompt {
        border: #999 solid 1px;
        border-radius: 13px;
        overflow: hidden;
        padding: 1px 2px;
        display: inline-block;
        height: 20px;
      }
      .listPrompt {
        float: left;
        height: 20px;
        width: 56px;
        margin-right: 2px;
        
      }
      .bot_text span {
        width: 52px;
        text-align: center;
        display: inline-block;
        line-height: 18px;
      }
    </style>
  </head>
  <body>
    <br/>
    <div>
      <p id="PromptMessage" style="margin-left: 200px;">
          新密码请至少使用字母、数字、符号两种<br/>类型组合的密码，长度为6~20位。</p>
      <input type="text" id="txtPassword" style="float: left;"/ placeholder="请输入密码">
      <div style="margin-left: 30px;font-size: 12px;float: left;">
        <div class="mainPrompt" align="center" bgcolor="#f5f5f5">
          <div class="listPrompt" id="strength_L" style="border-radius: 8px 0px 0px 8px;">
          </div>
          <div class="listPrompt" id="strength_M">
          </div>
          <div class="listPrompt" id="strength_H" style="margin-right: 0px;border-radius: 0 8px 8px 0;">
          </div>
        </div>
        <div class="bot_text">
          <span id="lowStrength">低</span> <span id="midStrength">
            中</span> <span id="highStrength">高</span>
        </div>
      </div>
    <div>
    <script type="text/javascript">
      function JudgyPwdLevel(pwdStr) {
        var hasNumber = 0;
        var hasLetter = 0;
        var hasSymbol = 0
        if (pwdStr.length >= 6) {
          for (var i = 0; i < pwdStr.length; i++) {
            var item = pwdStr[i];
            if (item >= '0' && item <= '9') { hasNumber = 1; }
            else if ((item >= 'a' && item <= "z") || (item >= 'A' && item < "Z")) { hasLetter = 1; }
            else { hasSymbol = 1; }
          }
        }
        return hasLetter + hasNumber + hasSymbol;
      }
      //显示颜色
      function pwStrength(pwd) {
        O_color = "#eeeeee";
        L_color = "#FF0000";
        M_color = "#FF9900";
        H_color = "#33CC00";
        if (pwd == null || pwd == '') {
          Lcolor = Mcolor = Hcolor = O_color;
        }
        else {
          S_level = JudgyPwdLevel(pwd);
          switch (S_level) {
            case 0:
              Lcolor = Mcolor = Hcolor = O_color;
            case 1:
              Lcolor = L_color;
              Mcolor = Hcolor = O_color;
              break;
            case 2:
              Lcolor = L_color;
              Mcolor = M_color;
              Hcolor = O_color;
              break;
            default:
              Lcolor = L_color;
              Mcolor = M_color;
              Hcolor = H_color;
          }
        }
        document.getElementById("strength_L").style.background = Lcolor;
        document.getElementById("strength_M").style.background = Mcolor;
        document.getElementById("strength_H").style.background = Hcolor;
        return;
      }
      $("#txtPassword").keyup(function(e){
       pwStrength($(e.target).val());
      });
 
    </script>
  </body>
</html>

这篇文章主要为大家详细介绍了jQuery密码强度验证控件使用详解的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下的更多相关文章

  1. 《手把手教你》系列技巧篇（七十一）-java+ selenium自动化测试-自定义类解决元素同步问题（详解教程）

    1.简介 前面宏哥介绍了几种关于时间等待的方法,也提到了,在实际自动化测试脚本开发过程,百分之90的报错是和元素因为时间不同步而发生报错.本文介绍如何新建一个自定义的类库来解决这个元素同步问题.这样, ...

  2. 《手把手教你》系列基础篇（九十三）-java+ selenium自动化测试-框架设计基础-POM设计模式实现-上篇（详解教程）

    1.简介 上一篇介绍了POM的基础理论知识和非POM方式写脚本,这篇介绍利用页面工厂类(page factory)去实现POM,通过查看PageFactory类,我们可以知道它是一个初始化一个页面实例 ...

  3. (转)[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  4. 如何在一小时内更新100篇文章？-Evernote Sync插件介绍

    上一篇"手把手教你制作微信小程序,开源.免费.快速搞定",已经教会你如何快速制作一个小程序,但作为资讯类小程序,内容不可少,并且还需要及时更新. 但是,如果让你复制粘贴,可能还需要 ...

  5. AFNetworking详解和相关文章链接

    写在开头: 作为一个iOS开发,也许你不知道NSUrlRequest.不知道NSUrlConnection.也不知道NSURLSession...(说不下去了...怎么会什么都不知道...)但是你一定 ...

  6. elasticsearch最全详细使用教程：入门、索引管理、映射详解、索引别名、分词器、文档管理、路由、搜索详解

    一.快速入门1. 查看集群的健康状况http://localhost:9200/_cat http://localhost:9200/_cat/health?v 说明:v是用来要求在结果中返回表头 状 ...

  7. 《手把手教你》系列技巧篇（三十九）-java+ selenium自动化测试-JavaScript的调用执行-上篇（详解教程）

    1.简介 在做web自动化时,有些情况selenium的api无法完成,需要通过第三方手段比如js来完成实现,比如去改变某些元素对象的属性或者进行一些特殊的操作,本文将来讲解怎样来调用JavaScri ...

  8. 《手把手教你》系列基础篇（八十四）-java+ selenium自动化测试-框架设计基础-TestNG日志-上篇（详解教程）

    1.简介 TestNG还为我们提供了测试的记录功能-日志.例如,在运行测试用例期间,用户希望在控制台中记录一些信息.信息可以是任何细节取决于目的.牢记我们正在使用Selenium进行测试,我们需要有助 ...

  9. 《手把手教你》系列基础篇（九十四）-java+ selenium自动化测试-框架设计基础-POM设计模式实现-下篇（详解教程）

    1.简介 上一篇宏哥用PageFactory实现了POM,宏哥再介绍一下如果不用PageFactory如何实现POM. 2.项目实战 在这里宏哥以百度首页登录的例子,如果用POM实现,在测试脚本中实际 ...

随机推荐

  1. RequireJS全面讲解

    异步模块定义(AMD)  谈起RequireJS,你无法绕过提及JavaScript模块是什么,以及AMD是什么. JavaScript模块只是遵循SRP(Single Responsibility  ...

  2. 算法导论-求(Fibonacci)斐波那契数列算法对比

    目录 1.斐波那契数列(Fibonacci)介绍 2.朴素递归算法(Naive recursive algorithm) 3.朴素递归平方算法(Naive recursive squaring) 4 ...

  3. Android实现二维码扫描登录网页

        之前写过一个二维码扫描demo,用的Zxing的框架,点击下载.兴许扫描二维码中出现一些问题,比方解决压缩图片.调整扫描窗体大小等等. 兴许单位要求做扫描登录实现,发现难点就是怎么知道你扫描的 ...

  4. hbase shell删除键不听使唤

    用Xshell登陆linux主机后,在hbase shell下死活不能使用backspace和delete删除误输的指令,只得不停退出,重登,仔细输..又错了,再退出,再登,仔细输...又错了...又 ...

  5. 2014ACM/ICPC亚洲区域赛牡丹江站现场赛-A （ ZOJ 3819 ） Average Score

    Average Score Time Limit: 2 Seconds      Memory Limit: 65536 KB Bob is a freshman in Marjar Universi ...

  6. Mycat探索之旅（3）----Mycat的全局序列号

    一.本地文件方式 原理:此方式MyCAT将sequence配置到文件中,当使用到sequence中的配置后,MyCAT会更下classpath中的sequence_conf.properties文件中 ...

  7. Oracle，跳出游标循环

    1,跳出游标的循环,不执行遍历了. 方法一:goto for c_row in 游标 loop if 条件 then dbms_output.put_line('测试跳出循环'); goto brea ...

  8. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（五）—— 解决tabs选择已建tab显示但datagrid的toolbar消失的问题

    项目需要反复运行,调整bug.发现在选择已有选项卡时,虽然不需要再新建tab,直接跳转到已有的tab上,但问题是显示的datagrid有事会出现toolbar消失的问题.网上也有不少同学出现类似问题, ...

  9. Win7与虚拟机Linux互通ping的网络设置

    转载请标明出处:http://www.linuxidc.com/Linux/2014-04/100450.htm 虽然从WinXP到Win7一直都可以使用VMWARE虚拟机安装Linux系统,记得每次 ...

  10. HTML5之坦克大战游戏开发

    1.在使用arc方法进行画圆时,在IE9+,FF,Safari,Chrome等已经支持HTML5标准的浏览器中进行渲染时,采用逆时针方向画时,也就是说 arc(x, y, radius, startA ...