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

2022-01-01 01:31:54

在今天的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代码：

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