jQuery密码强度验证控件使用详解


Posted in Javascript onJanuary 05, 2017

本文实例为大家分享了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;
    background-color: #eeeeee;
   }
   .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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
jquery广告无缝轮播实例
Jan 05 #Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 #Javascript
javascript添加前置0(补零)的几种方法
Jan 05 #Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 #Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 #Javascript
bootstrap table配置参数例子
Jan 05 #Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
Javascript复制实例详解
2016/01/28 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Django使用rest_framework写出API
2020/05/21 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
教师见习期自我鉴定
2014/04/28 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年度信用社工作总结
2015/05/04 职场文书