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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP答题类应用接口实例
2015/02/09 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
详解Django配置优化方法
2019/11/18 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
师范学院教师自荐书
2014/01/31 职场文书
项目经理任命书
2014/06/04 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
Python pyecharts绘制条形图详解
2022/04/02 Python