jQuery判断密码强度实现思路及代码

 更新时间:2013年04月24日 15:58:39   作者:   我要评论
实现思路为:密码小于六位的时候,密码强度图片都为灰色;密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度等等,感兴趣的朋友可以参考下哈

复制代码 代码如下:

<head>
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
.qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height:40px;float:left;}
.zhong{background:url(/images/pas3.JPG) no-repeat;width:150px;height:40px;float:left;}
.ruo{background:url(/images/pas2.JPG) no-repeat;width:150px;height:40px;float:left;}
.ruox{background:url(/images/pas1.JPG) no-repeat;width:150px;height:40px;float:left;}
.div1css{float:left;width:200px;}
</style>
<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())) {
$('#div2').addClass('ruox');
//$('#passstrength').html('小于六位的时候'); //密码小于六位的时候,密码强度图片都为灰色
}
else if (strongRegex.test($(this).val())) {
$('#div2').removeClass('zhong');
$('#div2').addClass('qiang');
//$('#passstrength').html('强!'); //密码为八位及以上并且字母数字特殊字符三项都包括
}
else if (mediumRegex.test($(this).val())) {
$('#div2').removeClass('ruo');
$('#div2').addClass('zhong');
//$('#passstrength').html('中!'); //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等
}
else {
$('#div2').removeClass('ruox');
$('#div2').addClass('ruo');
//$('#passstrength').html('弱!'); //如果密码为6为及以下,就算字母、数字、特殊字符三项都包括,强度也是弱的
}
return true;
});
})
</script>
</head>
<body>
<div id="div1" class="div1css">
<input type="password" name="pass" id="pass" /></div>
<div id="div2"><span id="passstrength"></span></div>
</body>

相关文章

  • html5+canvas实现支持触屏的签名插件教程

    html5+canvas实现支持触屏的签名插件教程

    jq-signature.js是一个帮助你创建签名的jQuery插件,允许你的用户使用鼠标,手指或者铅笔生成签名。下面这篇文章主要给大家介绍了利用html5+canvas实现支持触屏的签名插件的相关资料,需要的朋友可以参考下。
    2017-05-05
  • Javascript实现Array和String互转换的方法

    Javascript实现Array和String互转换的方法

    这篇文章主要介绍了Javascript实现Array和String互转换的方法,涉及JavaScript中toString方法与split方法的使用技巧,需要的朋友可以参考下
    2015-12-12
  • 基于Asp.net与Javascript控制的日期控件

    基于Asp.net与Javascript控制的日期控件

    使用Asp.net+Javascript控制的日期控件,需要的朋友可以参考下。
    2010-05-05
  • JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    这篇文章主要介绍了JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法,详细分析了弹出遮罩层效果的实现方法以及完整的实例代码,需要的朋友可以参考下
    2014-12-12
  • JS是按值传递还是按引用传递

    JS是按值传递还是按引用传递

    在分析这个问题之前,我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference)。在计算机科学里,这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。
    2015-01-01
  • JS简单实现自定义右键菜单实例

    JS简单实现自定义右键菜单实例

    本篇文章主要介绍了JS简单实现自定义右键菜单实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • JS函数多个参数默认值指定方法分析

    JS函数多个参数默认值指定方法分析

    这篇文章主要介绍了JS函数多个参数默认值指定方法,结合实例形式分析了javascript函数参数的定义与传递相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • 关于URL中的特殊符号使用介绍

    关于URL中的特殊符号使用介绍

    因为经常被Javascript中的rul的相关知识困扰,今天来总结一下URL的特殊字符
    2011-11-11
  • 前端插件之Bootstrap Dual Listbox使用教程

    前端插件之Bootstrap Dual Listbox使用教程

    这篇文章主要介绍了前端插件之Bootstrap Dual Listbox使用教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • 详解如何使用babel进行es6文件的编译

    详解如何使用babel进行es6文件的编译

    这篇文章主要介绍了详解如何使用babel进行es6文件的编译,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论