商城项目总结（一）

   就从简单的说起吧，仔细想想似乎也没什么难的东西，只是觉得收货了一些干货而已，可见多么的弱。
   1.输入框占位符的兼容问题，placeholder是个很好的属性，但是ie9及一下版本不支持，这时候就需要一个占位符兼容的插件了，我用的是jquery.placeholder.js，很好用，引入之后只需要调用一下就OK。类似这样：

    $('input').placeholder();

不过这玩意儿不是万能的，我最近在做的一个项目就遇到了另外一种问题，真是脑洞大开，想不到的问题都能遇到，随后我会贴上我的解决方案；
2.懒加载，jQuery有一个很好的插件解决的这个问题，这个技术方案特别适用于电商之类的图片比较多的项目，因为它能优化首屏的呈现时间，减少用户等待，当然和天猫那种公司比不了，人家更绝，用的是BigPipe技术，没仔细研究过，一种极端的加载方案；

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
 <script type="text/javascript" src="jquery.lazyload.js"></script>
 $("img.lazy").lazyload({
     event : "click"//设置事件来触发加载
     effect: "show",//使用特效,例如淡入淡出，动画之类的
    threshold :200,//设置临界点(PX)
    });

3.表单验证还是用大名鼎鼎的jQuery.validate.js,用起来很方便，API有很多，直接将项目中的代码片撸过来了，还是看注释吧。

 $("#yourForm").validate({
            // debug: true,    //开发中用，阻止表单的提交
            rules: {
                username: {
                    required:true,   //必须填写
                    remote: {
                            url: "check-username.php",     //后台处理程序
                            type: "post",
                            dataType: "json",
                            data: {
                                username: function() {
                                    return $("#username").val();
                                }
                            }
                        }
                },
                password: {
                    required:{depends:function(element){
                        return $("#username").is(":filled");  //向上依赖，上边的非空后再向下验证
                    }},
                    remote: {
                            url: "check-username.php",     //后台处理程序
                            type: "post",
                            dataType: "json",
                            data: {
                                password: function() {
                                    return $("#password").val();
                                }
                            }
                        }
                },
                  verif:{
                    required:{depends:function(element){
                        return $("#password").is(":filled");
                    }},
                },
            },
            messages: {
                username: {
                    required: '请输入用户名',
                    remote:'用户名错误，请重新输入',
                },
                password: {
                    required: '请输入密码',
                    remote:'密码错误，请重新输入',
                },
                verif:{
                    required:"请输入验证码",
                }
            },
            //错误提示信息元素标签
             errorElement:"em",
            //高亮错误的输入框
            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
            },
            //输入正确后取消高亮
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
            },
            //对一组元素的验证，用一个错误提示??  这个貌似我没印象了
            groups:{
                login:"username password"
            },
            //将错误提示信息放在一个地方，适用与比较拥堵的页面
            errorPlacement:function(error,element){
                   error.appendTo("#myInfo");
            }
            //最后再来一个手机号码正则，很有用，也很常用
            jQuery.validator.addMethod("telphoneValid", function(value, element) {
                var tel = /^1[3|4|5|7|8]\d{9}$/;
                return tel.test(value) || this.optional(element);
            }, "请输入正确的手机号码");
        });

表单验证基本就这些够用了，目前还没碰到这个插件解决不了的问题。
先贴这么多吧，后边有些东西还是分开写吧。