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

随机推荐

BZOJ 3511 土地划分
AC通道:http://www.lydsy.com/JudgeOnline/problem.php?id=3511 题目分析: 看上去和前面的人员雇佣以及小M种田都很像. 最小割模型来求最大值,一般都 ...
【BZOJ】【3530】【SDOI2014】数数
AC自动机/数位DP orz zyf 好题啊= =同时加深了我对AC自动机(这个应该可以叫Trie图了吧……出边补全!)和数位DP的理解……不过不能自己写出来还真是弱…… /************* ...
Leetcode#123 Best Time to Buy and Sell Stock III
原题地址最直观的想法就是划分成两个子问题,每个子问题变成了:求在某个范围内交易一次的最大利润在只能交易一次的情况下,如何求一段时间内的最大利润?其实就是找股价最低的一天买进,然后在股价最高的一天卖 ...
原生js实现中文时钟
零.寒暄终于一个月可以更新两篇博客了,开心.昨天花了大概一天的时间玩了下github,基本的clone和push都搞定了,如果有和我一样的新手没调通的,大家可以交流. 另外,说个题外话,大家发现我的 ...
vs2010 使用IIS EXPRESS出错.
出现的问题: 解决方法: 左键单击Web项目, 查看属性选项卡, 将托管管道模式改成Classic就可以了.
解决Myeclipse 编辑jsp页面卡
解决Myeclipse 编辑jsp页面卡编辑一个jsp页面时,如果每输入一下,CPU都100%一下,和大家分项一下. 问题: 当你编辑一个jsp页面时,如果每输入一下,CPU都100%一下,3, ...
同一网站不同和二级域名和不同子目录的cookie
1.cookie二级域名的实现: 用户其中一个站点登录,而且可以各个子频道间切换,保持登录状态设置Cookie时,使用如下代码即可:setcookie(name,value,expire,path,& ...
line-height 与垂直居中!
在此之前,对于line-height 与垂直居中的问题,经常碰到. 比如,图片与span在同一个box中的时候,竟然会各种偏移.要想达到理想的效果真的是各种难. 有时间,决定认真的啃一啃. 一 lin ...
Logstash最佳实践
http://udn.yyuap.com/doc/logstash-best-practice-cn/index.html
poj 3159(差分约束经典题)
题目链接:http://poj.org/problem?id=3159思路:题目意思很简单,都与给定的条件dist[b]-dist[a]<=c,求dist[n]-dist[1]的最大值,显然这是 ...