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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
js快速排序的实现代码
Dec 08 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
js性能优化技巧
2015/11/29 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
python学习手册中的python多态示例代码
2014/01/21 Python
python图书管理系统
2020/04/05 Python
Python操作json的方法实例分析
2018/12/06 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Python必须了解的35个关键词
2020/07/16 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
《最大的“书”》教学反思
2014/02/14 职场文书
公司任命书模板
2014/06/06 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
护士工作失误检讨书
2014/09/14 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
springboot入门 之profile设置方式
2022/04/04 Java/Android
公历12个月名称的由来
2022/04/12 杂记