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

• 在线演示1

• 本地下载

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

相关的插件和类库

• complexify- 一个密码强度检验jQuery插件

• justgage- 一个兼容性良好的仪表盘类库

主要功能

• 注册中包含一个密码强度检验组件，用户需要设置一定强度的密码才可以注册

• 密码强度使用仪表盘类库justgage来显示，不同的强度的密码将显示不同的颜色

• 密码强度符合要求后，显示注册按钮

代码说明

HTML：

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

添加电子邮件和密码输入框，及其密码强度组件。

Javascript：

导入所需的类库，包括：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="js/jquery.complexify.js"></script><script src="js/jquery.placeholder.min.js"></script><script src="js/raphael.2.1.0.min.js"></script><script src="js/justgage.1.0.1.min.js"></script>

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

$(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');});});

以上代码中，我们使用JustGage生成需要的仪表盘。相关选项请参考代码。

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

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

如果符合则显示注册按钮，否则隐藏。同时刷新仪表盘的数值和颜色。

CSS代码：

body{background: url('../images/body.png');}#container{background: url('../images/bg.jpg');padding: 30px;margin-top: 150px;box-shadow: 0px 0px 30px #9d7540;border-radius: 5px 5px 0px 0px;}#page-wrap{margin: 0 auto;width: 310px;text-align: center;font-size: 14px;padding:0px;font-family: Arial;}P{margin: 20px 0;padding:0;}#title{width: 292px;margin: 20px 0;font-size: 14px;font-weight: normal;font-family: Arial;color: #a27942;text-align:left;border-left: 4px solid #6e522d;border-right: 6px solid #303030;border-radius: 5px;padding: 12px 5px;background: #303030;box-shadow: 0px 0px 10px #4f3b20;}#msgbox{color: #808080;}input{width: 300px;height: 40px;box-shadow: 0px 0px 10px #4f3b20;border-radius: 5px;font-size: 14px;font-weight: normal;margin:0;padding: 0 5px;border: 1px solid #606060;font-family: Arial;background: #303030;color: #CCC;}#complexity{width: 302px;padding: 5px 5px;font-size: 18px;font-weight: bold;margin: 0px;box-shadow: 0px 0px 10px #4f3b20;border-radius: 5px;color:#CCC;background: #303030;}#submit{display: none;width: 310px;}#gbin1{padding: 15px 0px;text-align: center;background: #101010;color: #909090;font-size:12px;font-family: Arial;border-radius: 0px 0px 5px 5px;box-shadow: 0px 0px 20px #4f3b20;}#gbin1 a{font-family: Arial;font-size:12px;color: #909090;text-shadow: 1px 1px 25px #fff;text-decoration: none;}

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

原文链接：
http://www.gbtags.com/gb/share/5889.htm