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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 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实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
页面中js执行顺序
2009/11/09 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python实现八大排序算法
2016/08/13 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python序列类型的打包和解包实例
2019/12/21 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
高级护理专业大学生求职信
2013/10/24 职场文书
终止劳动合同协议书
2014/10/05 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers