js动态判断密码强度&&实用的 jQuery 代码片段

// 网上拷贝的代码，效果不太好需要自己调整
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery密码强度检测提示代码 - 【科e互联】</title>

<meta name="keywords" content="js特效,密码强度检测,密码强度提示,密码安全提示脚本,js安全级别提示" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

    $('#pass').keyup(function () {

        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

        var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 

        if (false == enoughRegex.test($(this).val())) {

            $('#level').removeClass('pw-weak');

            $('#level').removeClass('pw-medium');

            $('#level').removeClass('pw-strong');

            $('#level').addClass(' pw-defule');

             //密码小于六位的时候，密码强度图片都为灰色

        }

        else if (strongRegex.test($(this).val())) {

            $('#level').removeClass('pw-weak');

            $('#level').removeClass('pw-medium');

            $('#level').removeClass('pw-strong');

            $('#level').addClass(' pw-strong');

             //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强

        }

        else if (mediumRegex.test($(this).val())) {

            $('#level').removeClass('pw-weak');

            $('#level').removeClass('pw-medium');

            $('#level').removeClass('pw-strong');

            $('#level').addClass(' pw-medium');

             //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等

        }

        else {

            $('#level').removeClass('pw-weak');

            $('#level').removeClass('pw-medium');

            $('#level').removeClass('pw-strong');

            $('#level').addClass('pw-weak');

             //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的

        }

        return true;

    });

})

</script>

</head>

<body class="keBody">

<h1 class="keTitle">jQuery密码强度检测提示代码</h1>

<div class="kePublic">

<!--效果html开始-->

<table style="width:320px;margin:40px auto;">

    <tr>

        <th>密码</th>

        <td><span  class="tbl-txt"><input id="pass" class="input-style" size="30" maxlength="30" name="pass" type="text" /></span></td>

    </tr>

    <tr>

        <th></th>

        <td id="level" class="pw-strength">

            <div class="pw-bar"></div>

            <div class="pw-bar-on"></div>

            <div class="pw-txt">

            <span>弱</span>

            <span>中</span>

            <span>强</span>

            </div>

        </td>

    </tr>

</table>

<!--效果html结束-->

<div class="clear"></div>

</div>

<div class="keBottom">

<p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank">www.internetke.com</a></p>

<p class="keTxtP">本站导航：

<a href="http://www.internetke.com/" target="_blank" class="cor_bs">网站建设</a> |

<a href="http://www.internetke.com/material/" target="_blank" class="cor_bs">网页素材</a> |

<a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs">网页特效</a> |

<a href="http://www.internetke.com/share/" target="_blank" class="cor_bs">设计分享</a> |

<a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs">建站教程</a> |

<a href="http://www.internetke.com/model/" target="_blank" class="cor_bs">网站模版</a> |

<a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs">酷站赏析</a>

</p>

<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。

<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>

</div>

</body>

</html>

===================================================================================================

测试密码的强度

在某些网站注册时常常会要求设置密码，网站也会根据输入密码的字符特点给出相应的提示，如密码过短、强度差、强度中等、强度强等。这又是怎么实现的呢？看下面代码：

<input type="password" name="pass" id="pass" />

<span id="passstrength"></span>

?

//下面的正则表达式建议各位收藏哦，项目上有可能会用得着

$('#pass').keyup(function(e) {

      //密码为八位及以上并且字母数字特殊字符三项都包括

     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

  //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等

     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

     var enoughRegex = new RegExp("(?=.{6,}).*", "g");

     if (false == enoughRegex.test($(this).val())) {

             $('#passstrength').html('More Characters');

     } else if (strongRegex.test($(this).val())) {

             $('#passstrength').className = 'ok';

             $('#passstrength').html('Strong!');

     } else if (mediumRegex.test($(this).val())) {

             $('#passstrength').className = 'alert';

             $('#passstrength').html('Medium!');

     } else {

             $('#passstrength').className = 'error';

             $('#passstrength').html('Weak!');

     }

     return true;

});

滚动时动态加载页面内容

有些网站的网页内容不是一次性加载完毕的，而是在鼠标向下滚动时动态加载的，这是怎么做到的呢？看下面代码：

 var loading = false;

 $(window).scroll(function(){

  if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){

       if(loading == false){

            loading = true;

            $('#loadingbar').css("display","block");

            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){

                 $('body').append(loaded);

                 $('#loaded_max').val(parseInt($('#loaded_max').val())+50);

                 $('#loadingbar').css("display","none");

                 loading = false;

            });

       }

  }

 });

 $(document).ready(function() {

  $('#loaded_max').val(50);

 });

采用data方法来缓存数据

在项目中，为了避免多次重复的向服务器请求数据，通常会将获取的数据缓存起来以便后续使用。通过JQuery可以很优雅的实现该功能：

 var cache = {};

  $.data(cache,'key','value'); //缓存数据

   //获取数据

  $.data(cache,'key');

js动态判断密码强度&&实用的 jQuery 代码片段的更多相关文章

一些实用的JQuery代码片段收集
本文将展示50个非常实用的JQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够 ...
经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
12 个非常实用的 jQuery 代码片段
jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助. 导航菜单背景切换效果 ...
几个非常实用的JQuery代码片段
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用). ...
十条很实用的jQuery代码片段
本文转自:http://developer.51cto.com/art/201604/509093.htm 作者:核子可乐译来源:51CTO 原文标题:10 jQuery Snippets for E ...
一些实用的JQuery代码片段收集(筛选，搜索，样式，清除默认值，多选等)
//each遍历文本框清空默认值 $(".maincenterul1").find("input,textarea").each(function () { ...
很实用的JQuery代码片段（转）
1 元素屏幕居中 jQuery.fn.center = function () { this.css("position","absolute"); this. ...
分享10个超实用的jQuery代码片段
来源:GBin1.com jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢! jQuery平滑回到顶端效果 $(doc ...

随机推荐

浅谈自我对git的初步认识
本学期我们新增了一门课程,那就是软件工程,不知道为什么,感觉有种莫名的高大上.哈哈!难道是这个名称太抽象了吗?这个问题我感觉到后来肯定就明白了. 第一次博客,感觉好紧张哦,嘿嘿!老师让我们谈谈对git ...
ZOJ 1111 Poker Hands
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1111 A poker hand consists of 5 ca ...
HDU 2196 求树上所有点能到达的最远距离
其实我不是想做这道题的...只是今天考试考了一道类似的题...然后我挂了... 但是乱搞一下还是有80分....可惜没想到正解啊! 所以今天的考试题是: 巡访 (path.pas/c/cpp) Cha ...
【BZOJ】【1027】【JSOI2007】合金
计算几何/凸包/Floyd Orz rausen大爷太强辣计算几何题目果然不会做>_> 这个题……虽然他给了3个坐标,但实际上是个二维的计算几何题= =因为第三维坐标可以直接用前两维坐标 ...
iOS 开发中的问题
错误提示: Your build settings specify a provisioning profile with the UUID “39642B69-0278-4265-8392-4B28 ...
AD转换后数字量的处理
假设模拟输入电压的最大值为5V,A/D转换器件为8位转换. [该转换器的分辨率为1/2n=0.3906%.] [能分辨输入模拟电压变化的最小值为5*0.3906%=19.5mv.] 则模拟电压与数字输 ...
抛弃jQuery 深入原生的JavaScript
虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile ...
applicationContext.xml xxx-servlet.xml
applicationContext.xml是随ContextLoaderListener的加载而执行的,而xxx-servlet.xml是随DispatcherServlet的加载而执行的,在web ...
从底层理解Python的执行
摘要:是否想在Python解释器的内部晃悠一圈?是不是想实现一个Python代码执行的追踪器?没有基础?不要怕,这篇文章让你初窥Python底层的奥妙. [编者按]下面博文将带你创建一个字节码级别的追 ...
安装WINCC6.0的步骤
安装WINCC6.0/6.2的步骤 (XP不能是HOME版的!!!) 1. 首先安装SQL FOR WINCC6.0/6.2这个软件(如果你的系统已安装此软件相关版本可能提示安装失败请卸载后再重 ...