标签：
// 网上拷贝的代码，效果不太好需要自己调整
<!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>
标签：
原文地址：http://www.cnblogs.com/lr393993507/p/5286783.html
