一、介绍
注册和登录是每个稍微有点规模的网站就应该有的功能。登陆功能与注册功能类似，也比注册功能要简单些。所以本文就以注册来说明jQuery插件的应用。
jQuery插件的使用非常简单，如果只按照jQuery插件demo中的演示使用，基本上很快就能上手。但是如果按照我们的需要进行操作，还真需要一些技巧。下面会以nanoscroller进行说明。
提到注册功能，无非就是对用户的注册信息进行验证，验证用户输入的注册信息是否合法，在jQuery插件中，validation插件可以实现验证功能。如果用户的信息合法，只需要用户同意“网站的协议”，就允许进行下一步操作————注册。“网站的协议”显示方式有多种，可以在当前页面，也可以在弹出层中。而本文介绍的是弹出层中显示”协议信息”，Lightbox_me插件可以实现弹出层功能。网站的“协议信息”的内容可能很多，为了提高用户的体验，我们可能需要使用滚动条来显示“协议信息”的部分信息。nanoscroller插件可以实现滚动条功能。
二、使用的插件
所以本文介绍的就是validation插件、Lightbox_me插件和nanoscroller插件的综合应用。在这里并不介绍这三个插件的使用方式，如果不明白的可以去插件官方了解使用方法。
三、插件实现的功能
为了实现注册，插件需要实现以下功能
validation插件实现的功能
1.验证email是否合法
2.用户名是否合法
3.信息的长度
4.是否同意本站“协议信息”
Lightbox_me插件实现的功能
1.隐藏显示弹出层，弹出层中显示“协议信息”
nanoscroller插件实现的功能
1.通过滚动显示“协议信息”
四、实现流程
1.首先定义页面样式,如定义“注册”的样式、页面居中显示等。代码有点多，在这里就不贴出来了。可以在下面的测试页面中看到
2.各插件的样式。插件必须能自定义样式。如需要定义“错误信息”的样式，弹出层的样式，滚动条的样式等。
/*滚动条的样式*/
.nano {
background: white;
width: 500px;
height: 500px;
font-size:12px;
display:none;
}
.nano .content {
padding: 20px;
}
.nano .content h2 {
background:#f95252;
color:white;
margin:0;
padding:8px;
border:1px solid #ccc;
}
.nano .content h4 {
padding:0;
margin-top:8px;
margin-bottom:4px;
font-size:14px;
}
.nano .pane {
background: #2A2931;
width: 8px;
right: 1px;
margin: 5px;
display:inherit;
}
.nano .pane .slider {
background: #f95252;
display:inherit;
}
/*验证的错误信息*/
#login #operbox p .error{
color:red;
}
3.js编码。涉及到三个插件，也是本文最主要的部分。这里只是大体介绍，需要的可以看测试页面中的代码。
弹出层插件使用很简单。我们只需要设置一个连接，在连接被点击时，初始化滚动条插件，然后显示弹出层。
$('#agreement').click(function(e) {
$("#agreementbox").show();
$("#agreementbox").nanoScroller({alwaysVisible: true,disableResize: true,alwaysVisible: true});
$('#agreementbox').lightbox_me({
centered: true
});
});
//关闭弹出层
$('#cancel').click(function(){
$('#agreementbox').trigger('close');
});
弹出层的操作很简答，滚动条插件的初始化也很简单。但是两个插件结合起来，却出现了一个问题。
就是滚动条显示不正确，如果按照官方demo使用，滚动条的显示正常，但是在这个实例中，我需要先隐藏“协议信息”，在用户点击按钮时出现，弹出层是出现了，也可以滚动，但是滚动条不正常，滚动条不随内容滚动。也就是层在隐藏的情况下，nanoscroller插件的滚动条无法初始化。
经过测试，解决了问题。也就是上面代码中的$(“#agreementbox”).show();这就话，先显示，再初始化。
弹出层、滚动信息正常了。下一步就是验证信息。validation插件在以前的文章中已经有过说明，所以这里不对以前的说明进行重复（可以看这篇文章网站开发常用jQuery插件总结(四）验证插件validation）,在这篇文章中只对自定义验证方法提了一下。这里对自定义方法做试下说明。
在验证信息时，我们需要验证用户名的格式，如只允许字母数字组成。我们便可以自定义方法，然后在方法中，使用正则表达式进行验证。如下代码所示
//添加自定义方法regex,执行正则表达式验证
$.validator.addMethod(
"regex",
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"输入格式不正确"
);
//判断用户名的输入格式，与添加的方法名相匹配regex
rules: {
username: {
required: true,
minlength: 6,
regex:/^[a-zA-Z0-9]{6,20}$/
}
},
//验证未通过时，提示的信息
messages: {
username: {
required: "用户名不能为空",
minlength: jQuery.format("用户名至少由 {0} 字符组成"),
regex:"用户名只能有数字字母组成"
}
}
五、测试说明
测试环境win7+ie8.chrome25.0.1364.97 m,firefox12.0。win7+ie8下无法显示圆角框
chrome下测试图：
