JQ技术实现注册页面带有校验密码强度


Posted in Javascript onJuly 27, 2015

主要介绍使用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;
}

通过相关类库和插件生成一个漂亮的带有密码强度检验的注册页面,使用JQ技术实现此功能,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
js查错流程归纳
May 04 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
JS实现拼图游戏
Jan 29 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 #Javascript
在for循环中length值是否需要缓存
Jul 27 #Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 #Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 #Javascript
javascript实现类似百度分享功能的方法
Jul 27 #Javascript
纯js模拟div层弹性运动的方法
Jul 27 #Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 #Javascript
You might like
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php中的动态调用实例分析
2015/01/07 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
python开发之文件操作用法实例
2015/11/13 Python
python 调用HBase的简单实例
2016/12/18 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
关于Django Models CharField 参数说明
2020/03/31 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
出纳的岗位职责
2013/11/09 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
高一数学教学反思
2014/02/07 职场文书
西式结婚主持词
2014/03/14 职场文书
村抢险救灾方案
2014/05/09 职场文书
学校督导评估方案
2014/06/10 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
开学典礼致辞
2015/07/29 职场文书