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

╰半夏微凉° 2022-07-31 15:18 33阅读 0赞

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

[**在线演示**][Link 1]

## 相关的插件和类库 ##

*   [complexify][] - 一个密码强度检验[jQuery插件][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：

导入所需的类库，包括：

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

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

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

*  
 *  
 *

[Link 1]: http://www.gbtags.com/gb/demoviewer/5889/fdce7f23-010f-4b06-8ad8-bf9315702800/index.html.htm
[complexify]: http://www.gbtags.com/technology/jquerynews/20120903-jquery-plugin-complexify
[jQuery]: http://www.gbin1.com/bloghome.html?tag=jquery%14plugin
[justgage]: http://www.gbtags.com/technology/javascript/20120823-gauge-justgage-js