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