jQuery插件综合应用(一)注册
一、介绍
注册和登录是每个稍微有点规模的网站就应该有的功能。登陆功能与注册功能类似，也比注册功能要简单些。所以本文就以注册来说明jQuery插件的应用。
jQuery插件的使用非常简单，如果只按照jQuery插件demo中的演示使用，基本上很快就能上手。但是如果按照我们的需要进行操作，还真需要一些技巧。下面会以nanoscroller进行说明。
提到注册功能，无非就是对用户的注册信息进行验证，验证用户输入的注册信息是否合法，在jQuery插件中，validation插件可以实现验证功能。如果用户的信息合法，只需要用户同意“网站的协议”，就允许进行下一步操作————注册。“网站的协议”显示方式有多种，可以在当前页面，也可以在弹出层中。而本文介绍的是弹出层中显示”协议信息”，Lightbox_me插件可以实现弹出层功能。网站的“协议信息”的内容可能很多，为了提高用户的体验，我们可能需要使用滚动条来显示“协议信息”的部分信息。nanoscroller插件可以实现滚动条功能。
二、使用的插件
所以本文介绍的就是validation插件、Lightbox_me插件和nanoscroller插件的综合应用。在这里并不介绍这三个插件的使用方式，如果不明白的可以去插件官方了解使用方法。或者是看下面的3篇文章
网站开发常用jQuery插件总结(四）验证插件validation
网站开发常用jQuery插件总结(二）弹出层插件Lightbox_me
网站开发常用jQuery插件总结(五)滚动条插件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下测试图：
测试地址：http://www.1100w.com/wp-content/uploads/2013/10/reg.html