jQuery实现注册会员时密码强度提示信息功能示例


Posted in jQuery onSeptember 05, 2017

本文实例讲述了jQuery实现注册会员时密码强度提示信息功能。分享给大家供大家参考,具体如下:

1.效果如图所示:

jQuery实现注册会员时密码强度提示信息功能示例

2.html代码:

<p><span>设置密码:</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b>
<span id="password1_bg" class="bg_rt" style="display:none"></span>
</p>
<p class="mima_qd" id="password1_strength" style="display:none">
 <span class="mm_strength"><em>密码强度</em>
   <i class="password_qd">
    <span class="password_bg" id="strength_L"></span>
    <span class="password_bg" id="strength_M"></span>
    <span class="password_bg" id="strength_H"></span>
   </i>
  <em id="pw_check_info"></em>
</span>
</p>
<p class="tishi_wr" id="password1_info"></p>

3.jquery代码:

//checkStrong函数
//返回密码的强度级别
function checkStrong(sPW){
  if (sPW.length<=4)
    return 0; //密码太短
    var Modes=0;
  for (i=0;i<sPW.length;i++){
    //测试每一个字符的类别并统计一共有多少种模式.
    //charCodeAt():返回unicode编码的值
    Modes|=CharMode(sPW.charCodeAt(i)); //测试某个字符属于哪一类
  }
  return bitTotal(Modes);//计算出当前密码当中一共有多少种模式
}
//CharMode函数
//测试某个字符是属于哪一类.
function CharMode(iN){
  if (iN>=48 && iN <=57) //数字
    return 1;
  if (iN>=65 && iN <=90) //大写字母
    return 2;
  if (iN>=97 && iN <=122) //小写
    return 4;
  else
    return 8; //特殊字符
}
//bitTotal函数
//计算出当前密码当中一共有多少种模式
function bitTotal(num){
  var modes=0;
  for (i=0;i<4;i++){
    if (num & 1) modes++;
    num>>>=1;
  }
  return modes;
}
//pwStrength函数
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
function pwStrength(pwd){
  var O_color="#eeeeee";
  var L_color="#FF4040";
  var M_color="#FF9900";
  var H_color="#33CC00";
  var info = "";
  if (pwd==null||pwd==''){
    Lcolor=Mcolor=Hcolor=O_color;
  } else {
    S_level=checkStrong(pwd);//检测密码的强度
    switch(S_level) {
       case 0:
         Lcolor=L_color;
         Mcolor=Hcolor=O_color;
         info = "弱";
         break;
       case 1:
         Lcolor=L_color;
         Mcolor=Hcolor=O_color;
         info = "弱";
         break;
       case 2:
         Lcolor=Mcolor=M_color;
         Hcolor=O_color;
         info = "中";
         break;
       default:
         Lcolor=Mcolor=Hcolor=H_color;
         info = "强";
       }
     }
   $("#strength_L").css("background", Lcolor);
   $("#strength_M").css("background", Mcolor);
   $("#strength_H").css("background", Hcolor);
   $("#pw_check_info").html(info);//密码强度提示信息
   return;
}
jQuery 相关文章推荐
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jquery+css实现下拉列表功能
Sep 03 #jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
You might like
php 在文件指定行插入数据的代码
2010/05/08 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
php实现异步数据调用的方法
2015/12/24 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python 将md5转为16字节的方法
2018/05/29 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
python中pyplot基础图标函数整理
2020/11/10 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
财务整改报告范文
2014/11/05 职场文书
初婚初育证明范本
2014/11/24 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL