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

随机推荐

01.Hibernate入门
前言:本文用一个简单的Hibernate应用程序例子来引领初学者入门,让初学者对Hibernate的使用有一个大致的认识.本文例子使用了MySQL数据库.Maven管理工具.Eclipse开发工具,创 ...
如何用javascript正则表达式验证身份证号码是否合法
在用户注册页面有些需求要求的比较严格,需要对身份证js验证是否合法,通过此功能严格此系统软件,从而过滤到很多水客.下面就此实现方法给大家讲解下. 很多时候我们都是通过一组正则表达式来判断用户输入的身份 ...
C# Redis
概念 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,和Memcached类似,它支持存储的value类型相对更多,包括string( ...
【BZOJ】【1021】【SHOI2008】Dept循环的债务
DP 去膜拜题解了>_>玛雅原来是动规…… 让我先理解一下为什么要用动规:这个题根据钱数推方案其实是无从下手的……(线性规划?……事实证明我想多了) 啦-我们先来看个超级简化版的问题:怎么 ...
linux命令集——<一>目录处理命令
1.ls,命令,显示当前目录下文件命令所在路径功能描述执行权限选项说明 ls /bin/ls 显示目录文件所有用户可用 -a 显示所有文件,包括隐藏文件 -l 显示详细信 ...
Leetcode#148 Sort List
原题地址链表归并排序真是恶心的一道题啊,哇了好多次才过. 代码: void mergeList(ListNode *a, ListNode *b, ListNode *&h, ListNo ...
.Net 命名(委托,事件==)
委托及参数命名: public delegate void ClickedEventHandler(object sender, ClickedEventArgs e); ClickedEventHa ...
DSP5509的时钟发生器(翻译总结自TI官方文档)
一.C5509时钟发生器的两个功能 1.将从CLKIN引脚输入的时钟信号变换为适当频率的CPU时钟,提供给CPU.外设和其他模块使用: 2.将CPU时钟通过可编程分频器输出到CLKOUT引脚. 时钟发 ...
Maven在项目中的应用
http://192.168.0.253:8081/nexus/#view-repositories;thirdparty~uploadPanel 使用局域网搭建的环境,输入用户名和密码登录,上传ja ...
CodeSite使用小结转载
一.要使用Codesite,需要引用csintf单元二.CodeSite的基本方法(一)AddCheckPoint方法codesite.AddCheckPoint 加入监测点(二)AddSeperat ...