// 網上拷貝的代碼，效果不太好需要自己調整
<!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; });
滾動時動態加載頁面內容
有些網站的網頁內容不是一次性加載完畢的，而是在鼠標向下滾動時動態加載的，這是怎么做到的呢？看下面代碼：
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');