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 ...

随机推荐

资料共享平台----nabcd
知识共享平台NABCD模型 N(need)需求大一新生刚刚开始大学生活,不适应大学学习生活的节奏,并且课堂上知识容量大.密度高,学生不能立刻掌握所学知识点,同时,网上资料冗杂繁复,指向性不强,导致学 ...
File "/struts-tags" not found
前言由于在某个jsp引用了struts标签库,导致该错误产生--这是stuts项目算是一道经典错误,往往最后的解决方式是更换Tomcat.今天我记录的是引起这一错误的一个非常隐藏的原因. 错误描述 ...
【BZOJ】【2049】【SDOI2008】洞穴勘测 Cave
LCT 哦……LCT的一道更水的裸题,适合学习access,link,cut等基本操作(其实这三个不是在一个层面上的?不要在意这些细节……) /**************************** ...
Orchard中文学习视频录制完成
Orchard学习视频已登录百度传课: http://www.chuanke.com/3027295-124882.html http://pan.baidu.com/s/13zc0u 1.orcha ...
Linq to Xml示例
Xml文件: <?xml version="1.0"?> <Software xmlns:xsi="http://www.w3.org/2001/XML ...
SQL SERVER 导出到Oracle 问题与技巧
工具: 使用SQL SERVER自带的导入, 导出工具技巧: 一. 使用Oracle Provider for OLE DB(强制推荐) 1. 速度快 2. 要安装Oracle驱动(Oracle ...
SQL Server 2008 R2评估期已过的解决办法
SQL Server 2008 R2评估期已过的解决办法发现问题北美产品测试服每日随机任务没有刷新每日随机任务是使用数据库作业定期执行操作,重置玩家随机任务项排查问题 www.2cto. ...
UICollectionViewLayout
http://blog.csdn.net/majiakun1/article/details/17204921
BZOJ1037: [ZJOI2008]生日聚会Party
DP… /************************************************************** Problem: 1037 User: zhuohan123 L ...
EF 中更新模型的问题，这种错误（因为相同类型的其他实体已具有相同的主键值。）
在EF经常在更新模型的时候可能会同时操作一个实体几次. 其实除了SaveChanges外,其它的几次基本都是要查询出一个结果, 例如更新的时候,我们要查一下这个表中有没有相同的纪录之类的. 查询完之后 ...