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




代码如下:

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

赞 (0)

相关推荐

  • jQuery实现注册会员时密码强度提示信息功能示例

    jQuery实现注册会员时密码强度提示信息功能示例

    本文实例讲述了jQuery实现注册会员时密码强度提示信息功能.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <p><span>设置密码:</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b>

  • jQuery插件passwordStrength密码强度指标详解

    jQuery插件passwordStrength密码强度指标详解

    passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>passwordStrength</title> <link href="css/style.css" rel=

  • 基于JQuery的密码强度验证代码

    基于JQuery的密码强度验证代码

       因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码 代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.f

  • jquery判断密码强度的验证代码

    jquery判断密码强度的验证代码

    本文实例讲述了jquery判断密码强度的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: JS代码: $('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.

  • jquery密码强度校验

    jquery密码强度校验

    本文实例讲述了jquery密码强度校验的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: 关键代码: <script> //下面的正则表达式建议各位收藏哦,项目上有可能会用得着 $(function(){ $('#pass').blur(function(e) { // alert('---------'); //密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=

  • jQuery实现提示密码强度的代码

    如何实现色条随输入密码长度变化效果: 在很多网站注册页面都有这样的功能,当用户输入密码的时候,下面会出现一个色条,色条的长度会跟随输入密码的长度变化,并且色条的颜色也会根据输入密码长度的不同有所改变,一般是用来提示密码强度.下面就简单介绍一下使用jQuery如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我们</tit

  • jQuery密码强度验证控件使用详解

    本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

  • passwordStrength 基于jquery的密码强度检测代码使用介绍

    查看示例:DEMO  打包下载 使用很简单. 复制代码 代码如下: $('#pass').passwordStrength(); XHTML 复制代码 代码如下: <p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthD

  • jQuery实用密码强度检测

    jQuery实用密码强度检测

    JQ实用密码强度检测 通过正则来判断验证密码强弱并通过替换提示图片进行显示. 素材图片,请自取: html源码: <table style="width:320px;margin:40px auto;"> <tr> <th>密码</th> <td><span class="tbl-txt"><input id="pass" class="input-style

  • jQuery密码强度检测插件passwordStrength用法实例分析

    jQuery密码强度检测插件passwordStrength用法实例分析

    本文实例讲述了jQuery密码强度检测插件passwordStrength用法.分享给大家供大家参考,具体如下: 这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS样式来直观地显示当前密码的强度.其中,实现此功能的重点和难点就是通过正则进行判断等级,有兴趣的朋友可以慢慢探究. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-passwordStrength

随机推荐