JQ技术实现注册页面带有校验密码强度(1/2)

本篇文章主要介绍了"JQ技术实现注册页面带有校验密码强度"，主要涉及到实现,密码方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 主要介绍使用jQuery实现带有校验密码强度的注册页面，当然要想生成一个漂亮的带有密码强度检验的注册页面要有相关插件和类库配合，具体内容如下：相关的插件和类库 ...

主要介绍使用jQuery实现带有校验密码强度的注册页面，当然要想生成一个漂亮的带有密码强度检验的注册页面要有相关插件和类库配合，具体内容如下：

相关的插件和类库

 complexify - 一个密码强度检验jQuery插件
 justgage - 一个兼容性良好的仪表盘类库
主要功能

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

HTML：


注册新账号 - gbtags.com

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

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的回调方法来判断用户输入的密码强度是否符合要求：