返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: html教程 >

密码强度passwordStrength插件

2020-05-07 文章标签: 插件 浏览次数:

我们讲解下使用passwordStrength插件,该插件可以检测密码强度,根据输入密码的简单程度下面的颜色会有相应的变化,比如输入123456或者大小写字母,特殊符号,长度等等都有相应的提示,在检测用户密码强度的经常用到

HTML5教程

我们看看代码效果

使用passwordStrength插件

我们输入大小码字符和长度更长看看效果

验证密码强度

我们看到颜色变深了。怎么使用呢

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>passwordStrength</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('input[name="password"]').passwordStrength();
})
</script>
<style type="text/css">
.is0{background:url(//freemuban.com/js/507/progressImg1.png) no-repeat 0 0;width:138px;height:7px;margin:10px 0 0 104px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}
#autotab input { width:138px; }
</style>
</head>
<body>
<h1>passwordStrength密码强度指标</h1>
<form action="" method="post" id="autotab" class="p1">
    <label>请输入密码:
    <input type="password" name="password" />
        <div id="passwordStrengthDiv" class="is0"></div>
    </label>
</form>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>passwordStrength</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('input[name="password"]').passwordStrength({
targetDiv: '#passwordStrengthDiv',
classes : Array('is10','is20','is30','is40')
});
})
</script>
<style type="text/css">
.is0{background:url(//freemuban.com/js/507/progressImg2.png) no-repeat 0 0;width:27px;height:30px;display:inline-block;}
.is10{background-position:-27px 0;}
.is20{background-position:-53px 0;}
.is30{background-position:-79px 0;}
.is40{background-position:-106px 0;}
</style>
</head>
<body>
<h1>passwordStrength密码强度指标</h1>
<form action="" method="post" id="autotab" class="p1">
    <label>请输入密码:
    <input type="password" name="password" />
        <div id="passwordStrengthDiv" class="is0"></div>
    </label>
</form>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。