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

 更新时间:2015年07月27日 15:21:11   作者:super1234  
这篇文章主要介绍了JQ技术实现注册页面带有校验密码强度,需要的朋友可以参考下

主要介绍使用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技术实现此功能,希望大家能够喜欢。

相关文章

  • JQuery 风格的HTML文本转义

    JQuery 风格的HTML文本转义

    astinus开发过程中,我自己就在不断的使用。有次贴了一些JS代码进去,于是页面显示错误。显然,把源代码直接放进html文本了——好吧,从05年转去做网游以后,一直没有正经的做过web了。
    2009-07-07
  • EasyUi datagrid 实现表格分页

    EasyUi datagrid 实现表格分页

    这篇文章主要介绍了EasyUi datagrid 实现表格分页的方法和示例分享,需要的朋友可以参考下
    2015-02-02
  • jQuery中:not选择器用法实例

    jQuery中:not选择器用法实例

    这篇文章主要介绍了jQuery中:not选择器用法,以实例形式分析了:not选择器的功能、定义及移除元素的用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery实现的简单二级菜单效果代码

    jquery实现的简单二级菜单效果代码

    这篇文章主要介绍了jquery实现的简单二级菜单效果代码,通过简单的jQuery控制鼠标事件及链式操作实现二级菜单切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 取消选中单选框radio的三种方式示例介绍

    取消选中单选框radio的三种方式示例介绍

    本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的,感兴趣的朋友可以了解下
    2013-12-12
  • Jquery实现简单的动画效果代码

    Jquery实现简单的动画效果代码

    Jquery实现简单的动画效果代码,需要的朋友可以参考下
    2012-03-03
  • jquery实现表格行拖动排序

    jquery实现表格行拖动排序

    这篇文章主要为大家详细介绍了jquery实现表格行拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jquery实现的树形目录实例

    jquery实现的树形目录实例

    这篇文章主要介绍了jquery实现的树形目录,涉及jquery针对页面元素及鼠标事件的相关操作技巧,需要的朋友可以参考下
    2015-06-06
  • jquery的ajax请求全面了解

    jquery的ajax请求全面了解

    jquery中封装了一些ajax请求的方法,很实用,整理出来与大家分享下,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-03-03
  • jQuery之字体大小的设置方法

    jQuery之字体大小的设置方法

    本篇文章主要是对jQuery 字体大小的设置方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02

最新评论