本文实例为大家分享了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. Linux、CentOS系统下调整home和根分区大小

    1.首先查看磁盘使用情况 [root@localhost ~]# df -h 文件系统 容量 已用 可用 已用% 挂载点 Filesystem Size Used Avail Use% Mounted ...

  2. vim删除文本文件中末行^M

    ^M字符的来历和作用:在DOS/Windows里,文本文件的换行符为\r\n,而在*nix系统里则为\n,所以DOS/Windows里编辑过的文本文件到了*nix里,每一行都多了个^M.所以^M只是一 ...

  3. Linux文件夹、分区

    必须明确,硬盘分区的存在,是由硬盘的物理特性决定的,不会因为操作系统的不同而有所改变 所以不用对为根目录/挂载分区的同时还为/usr挂载分区感到惊讶   ====分区的概念==== 可以把一个硬盘比成 ...

  4. Hyper-V Tools for win7

    http://download.microsoft.com/download/C/1/C/C1CA233D-CA1A-4C4D-8240-B4AFC0FD3433/Windows6.1-KB95883 ...

  5. MySQL Win7 64位 下载、安装与配置图文教程

    MySQL是目前十分流行的一种关系型数据库管理系统.官网推出的安装包有两种格式,分别是:ZIP格式和MSI格式.其中MSI格式的可以直接点击安装,按照它给出的安装提示进行安装,一般MySQL将会安装在 ...

  6. 【DP】【单调队列】【NOI2005】瑰丽华尔兹

    340. [NOI2005] 瑰丽华尔兹 ★★★ 输入文件:adv1900.in 输出文件:adv1900.out 简单对照 时间限制:1 s 内存限制:128 MB [任务描写叙述] 你跳过华尔兹吗 ...

  7. Docker -CentOS 6.5上安装

    开始安装daoker之旅: 1. [root@localhost ~]# uname -r -.el6.x86_64 2. [root@localhost ~]# cat /etc/issue Cen ...

  8. ibatis中<![CDATA[使用解释

    http://hi.baidu.com/taoxincheng0/blog/item/3916c4ec413f03c22e2e2160.html ibatis中什么时候需要用到: <![CDAT ...

  9. oracle加入not null约束

    在创建表时.为列加入not null约束,形式例如以下: column_name data_type [constraint constraint_name] not null 当中,constrai ...

  10. activiti自己定义流程之整合（三）：整合自己定义表单创建模型

    本来在创建了表单之后应该是表单列表和预览功能.可是我看了看整合的代码,和之前没实用angularjs的基本没有什么变化,一些极小的变动也仅仅是基于angularjs的语法,因此全然能够參考之前说些的表 ...