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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
js闭包实现按秒计数
Apr 23 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
了解JavaScript中let语句
May 30 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
Vue实现购物车实例代码两则
May 30 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
PHP图片上传类带图片显示
2006/11/25 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
详解如何减少python内存的消耗
2019/08/09 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python属于解释语言吗
2020/06/11 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Keras搭建自编码器操作
2020/07/03 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
公务员转正考察材料
2014/02/07 职场文书
党支部换届选举方案
2014/05/08 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
利用python进行数据加载
2021/06/20 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫