使用jQuery开发一个带有密码强度检验的超酷注册页面

在线演示  本地下载

在今天的 jQuery教程中，我们将介绍如何使用 jQuery和其它相关的插件来生成一个漂亮的带有 密码强度检验的注册页面，希望大家喜欢！

相关的插件和类库

•   complexify – 一个密码强度检验 jQuery插件
•   justgage – 一个兼容性良好的仪表盘类库

主要功能

• 注册中包含一个密码强度检验组件，用户需要设置一定强度的密码才可以注册
• 密码强度使用仪表盘类库justgage来显示，不同的强度的密码将显示不同的颜色
• 密码强度符合要求后，显示注册按钮

代码说明

HTML：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="page-wrap"> <div id="title">注册新账号 - gbtags.com</div> <p> <input type="text" name="email" id="email" placeholder="电子邮件"/> </p> <p> <input type="password" name="password" id="password" placeholder="输入密码"/> </p> <div id="complexity"></div> <p> <input type="button" name="submit" id="submit" value="注册" /> </p> <p id="msgbox"></p> </div>

以下为生成仪表盘及其密码强度代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

$(function(){ $('#submit').attr('disabled', true); var g1 = new JustGage({ id: "complexity", value: 0, min: 0, max: 100, title: "密码强度提示", titleFontColor: '#9d7540', valueFontColor : '#CCCCCC', label: "points", levelColors: [ "#dfa65a", "#926d3b", "#584224" ] }); $('input[placeholder]').placeholder(); $("#password").complexify({}, function(valid, complexity){ if(valid){ $('#submit').fadeIn(); }else{ $('#submit').fadeOut(); } g1.refresh(Math.round(complexity)); });   $('#submit').click(function(){ $('#msgbox').html('welcome to gbtags.com'); }); });

以下代码中，我们使用complexify的回调方法来判断用户输入的密码强度是否符合要求:

1 2 3 4 5 6 7 8

$("#password").complexify({}, function(valid, complexity){ if(valid){ $('#submit').fadeIn(); }else{ $('#submit').fadeOut(); } g1.refresh(Math.round(complexity)); });

代码书写完毕，如果需要查看完整代码，请下载演示。希望大家喜欢这个实现！如果你有任何意见和建议请给我们留言，谢谢！

来源： 使用jQuery开发一个带有密码强度检验的超酷注册页面