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="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;
});

滚动时动态加载页面内容

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

 1 var loading = false;
 2 $(window).scroll(function(){
 3  if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
 4       if(loading == false){
 5            loading = true;
 6            $('#loadingbar').css("display","block");
 7            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
 8                 $('body').append(loaded);
 9                 $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
10                 $('#loadingbar').css("display","none");
11                 loading = false;
12            });
13       }
14  }
15 });
16  
17 $(document).ready(function() {
18  $('#loaded_max').val(50);
19 });

采用data方法来缓存数据

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

1 var cache = {};
2  $.data(cache,'key','value'); //缓存数据
3   //获取数据
4  $.data(cache,'key');