商城项目总结（一）

就从简单的说起吧，仔细想想似乎也没什么难的东西，只是觉得收货了一些干货而已，可见多么的弱。
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);
}, "请输入正确的手机号码");
});