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

随机推荐

python 关键字参数
原文地址:http://docs.pythontab.com/python/python3.4/controlflow.html#tut-functions 函数可以通过关键字参数的形式来调用,形 ...
idea新建项目完整过程
参看下面博客 http://www.cnblogs.com/cnjava/archive/2013/01/29/2881654.html 突然,感觉idea其实挺麻烦的: 一.junit test做起 ...
jquery的ajax向后台提交时，乱码的解决方案
1. 可以给每个参数加上encodeURIComponent(),然后在后台获得参数后用URLDecoder.decode(string, 'utf-8')解码. 2. 后台不用解码. $.ajax( ...
C语言预处理命令
1.#error Directive (C/C++) The #error directive emits a user-specified error message at compile time ...
提高Asp.Net应用程序性能的十大方法(译感)
译完了提高Asp.Net应用程序的十大方法这篇文章,仔细想其中提到的每一条,在这里结合我的项目来谈谈.第一条:返回多个结果集因为我的项目中所有对数据库的访问的sql语句都是通过调用存储过程实现的,所以 ...
Xml Schema的用途
Xml Schema的用途 1．定义一个Xml文档中都有什么元素 2．定义一个Xml文档中都会有什么属性 3．定义某个节点的都有什么样的子节点,可以有多少个子节点,子节点出现的顺序 4． ...
vi/vim使用指北 ---- Learning the vi and Vim Editors 读书笔记
vi/vim作为liux系统下最强大,最流行的文本编辑器之一.边看<Learning the vi and vim Editor>边学习vim,顺便做写简单的笔记,供以后查询. 没看这本书 ...
-高级Javascript编程学习笔记----Javascript编程及架构设计最应该注意的基本点
最小全局变量 JavaScript通过函数管理作用域.在函数内部生命的变量只在这个函数内部,别的地方不可用.全局变量是指在函数外或是未声明直接简单使用的.每个Javascipt环境有一个全局对象,当你 ...
开源搜索引擎Solr的快速搭建及集成到企业门户最佳实施方案--转载
笔者经过研究查阅solr官方相关资料经过两周的研究实现了毫秒级百万数据的搜索引擎的搭建并引入到企业门户.现将实施心得和步骤分享一下. 1. jdk1.6 安装jdk1.6到系统默认目录下X: ...
nested pop animation can result in corrupted navigation bar
nested pop animation can result in corrupted navigation barFinishing up a navigation transition in a ...