本文实例为大家分享了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. 安装Scala 找不到或无法加载主类 scala.tools.nsc.MainGenericRunner 错误

    对于安装Scala时 找不到或无法加载主类 scala.tools.nsc.MainGenericRunner 错误,不管是linux还是window系统,原因很大可能是scala的安装路径中出现空格 ...

  2. docker 安装 gogs(go git server) 及问题解决

    docker安装gogs 参考官方说明 gogs mysql 支持 运行一个mysql image docker run --name gogs-mysql -e MYSQL_ROOT_PASSWOR ...

  3. MyBatis批量添加、修改和删除

    1.批量添加元素session.insert(String string,Object o) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  4. wine 魔兽争霸

    连接参见http://linux-wiki.cn/wiki/%E7%94%A8Wine%E8%BF%90%E8%A1%8C%E9%AD%94%E5%85%BD%E4%BA%89%E9%9C%B8III ...

  5. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面如何自动运行，不让用户干涉，设置起始界面

    右击视图管理器,添加一个TargetVisualization   在起始视图中点击右边的按钮,然后选择一个HMI作为起始HMI     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: h ...

  6. Andrew Ng机器学习课程6

    Andrew Ng机器学习课程6 说明 在前面尾随者台大机器学习基石课程和机器学习技法课程的设置,对机器学习所涉及到的大部分的知识有了一个较为全面的了解,可是对于没有动手敲代码并加以使用的情况,基本上 ...

  7. Android Exception 17(database or disk is full)

    android.database.sqlite.SQLiteFullException: database or disk is full delete some app,or clear cache

  8. jquery ui dialog 中使用select2 导致select2的input失去焦点的解决方法

    在jqueryUI 的dialog中使用select2,select2的input search无论怎样都获取不到焦点? 解决方法: $(document).ready(function () { $ ...

  9. iOS开发－XCode常用快捷键整理

    前言:如果我们能够掌握并巧妙地使用快捷键,可以大大加快我们的工作效率,这个对经常使用快捷键的人们来说,应该很容易理解.因此我们需要做的是,针对于自己经常使用的快捷键去进行记忆.我不会推荐你们去把所有的 ...

  10. vb调试dll

    1.有两个工程BW_DetectCard.vbp(生成dll)及识别卡检测软件.vbp(生成exe) 2.打开工程<识别卡检测软件.vbp>,在文件--添加工程--现存,找到要引用的dll ...