显示百分比的密码强度验证jQuery代码_网页表单特效,jQ表单验证,ajax表单特效免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

jquery密码长度验证

本密码长度验证，带动画效果，当您在密码框输入字符，下面的强度显示条，会以动画形式向前增长，数字也跟着一起变化，到50%的时候变成绿色。不过，缺陷是，只能验证长度，实际上，并不能验证密码的强度。有待改进。不过，我爱模板网认为，如果您仅仅需要验证长度，那么这个还不错。

使用方法

1、在head引入css、js、jQuery：

01<link rel="stylesheet" href="css/style.css">
02<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
03<script src="js/jquery.complexify.js"></script>
04<script src="js/jquery.placeholder.min.js"></script>
05<script>
06    $(function(){
07        $('input[placeholder]').placeholder();
08        $("#password").complexify({}, function(valid, complexity){
09            if (!valid) {
10                $('#complexity').stop().animate({'width':complexity + '%'}).removeClass('valid').addClass('invalid');
11            } else {
12                $('#complexity').stop().animate({'width':complexity + '%'}).removeClass('invalid').addClass('valid');
13            }
14            $('#complexity').html(Math.round(complexity) + '%');
15        });
16    });
17</script>

2、在body引入下面的html代码：

1<input type="password" name="password" id="password" placeholder="输入密码"/>
2<div id="complexitywrap">
3    <div id="complexity">0%</div>
4</div>

验证框的长度和密码框的长度请自定义。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

显示百分比的密码强度验证jQuery代码

猜你喜欢