大家好，第一次写有点正规的博客，以前都是随手复制几下。为了打LOL,我写快点，代码我都复制在最下面了，并且写了大量的注释。
首先我写jquery插件，喜欢这么写（好处有很多，以后在讲，哈哈，看过jQuery源码应该知道）：
factory(root.jQuery,plug)
})(window,function($,plug){
/*
在这里写逻辑
一：默认的参数 var __dEFAULTS__，
二：规则（可根据业务需求自己配置） var __RULES__，
三：原型 var __PROTOTYPE__，
_init: 初始化DOM结构，没什么将的,
_attachEvent: 自定义的事件的机制（其实就是用了jquery的trigger）
_bind: 首先是事件功能的绑定，为每一个input都绑定事件,each循环__RULES__（就是规则），找到所以自定义data的值（也就是每一个input中所需要的规则校验），用if来判断，当前的input中配置了几个data属性，并且通过 rule.call(_$field)（这句话的意思就是调用rule函数的时候，rule函数里的this引用变成了_$field），把input中的rule规则判断一下。如果为false，那么就在input的父元素下面添加一个p标签，那么怎么让p标签中的内容让用户来配置呢？
"+(_$field.data(key+"-message")||_$this.errorMessage)+"
，这其中的意思是如果错了，那么就不往下检索rule了，直接return result（因为rule返回为false,所以这里的result也为false），来阻止。并且
添加p
标签，并且根据result的值来判断input的父元素,来个父元素
加上一个success或error。最后还有submit
方法：这个
方法是用来通过input父元素的class中有没有error，来判断触发哪一个
自定义事件
四：$.fn[plug]
一：首先判断当前元素是否是from标签，不是的话，throw一个错误
二：$.extend(this,__dEFAULTS__,options,__PROTOTYPE__); (....貌似有同学面试死在这个上面了，有空讲一下吧)
三：this._init(); this._bind(); return this;
五：根据业务需求，用户自定义添加rule：就是如下添加一个方法，就可以了，（下次有时间还是讲一下extend吧）
六：ajax
JS：
= Number(this.data("minlength"));
},// 最短的长度
maxlength: function() {
return this.val().length <= Number(this.data("maxlength"));
},// 最长的长度
between: function() {
var length = this.val().length;
var between = this.data("between").split("-");
return length >= Number(between[0]) && length <= Number(between[1]);
},// 两者之间的长度
equalto: function() {
if ($(this.data("equalto")).val() === this.val()) {
$(this.data("equalto")).parent(".mf-line").removeClass('error').addClass('success').next("p").remove();
return true;
}
return false;
},// 和xxx相同
greaterthan: function() {
return this.val() > Number(this.data("greaterthan"));
},// 大于
lessthan: function() {
return this.val() < Number(this.data("lessthan"));
},// 小于
middle: function() {
var length = this.val();
var middle = this.data("middle").split("-");
return length >= Number(middle[0]) && length <= Number(middle[1]);
},// 两者之间的数字
integer: function() {
return /^\-?[0-9]*[1-9][0-9]*$/.test(this.val());
},// 整数
number: function() {
return !isNaN(Number(this.val()));
},// 必须是数字
email: function() {
return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this.val());
},// 邮箱地址
mobile: function() {
return /^1\d{10}$/.test(this.val());
},// 电话号码
phone: function() {
return /^\d{4}\-\d{8}$/.test(this.val());
},// 手机号码
uri: function() {
return /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g.test(this.val());
},// 有效的统一资源标识符
amount: function() { //金额
if (!this.val()) return true;
return /^([1-9][\d]{0,}|0)(\.[\d]{1,2})?$/.test(this.val());
}
};
var __PROTOTYPE__ = {
//初始化dom结构
_init: function() {
this.$fields = this.find(".mf-line .mf-txt:visible"); //选择可见的input(过滤掉display: none)
},//
自定义事件的触发机制
_attachEvent: function(event,args) {
this.trigger(event,args);
},//事件
_bind: function() {
var _$this = this;
//事件
功能绑定
this.$fields.on(this.triggerEvent,function() {
var _$field = $(this); //需要验证的表单
var $group = _$field.parents(".mf-line"); //拿到input的div
var result = true;
$group.next("p").remove();
$.each(__RULES__,function(key,rule) {
if (_$field.data(key)) {
result = rule.call(_$field);
(!result) && $group.after("
" + (_$field.data(key + "-message") || _$this.errorMessage) + "
");
return result;
}
})
$group.removeClass('error success').addClass(result ? 'success' : 'error');
})
this.on("submit",function() {
var $groups = _$this.$fields.trigger(_$this.triggerEvent).parents(".mf-line");
if ($groups.filter(".error").length > 0) {
_$this._attachEvent("error",{});
} else {
_$this._attachEvent("success",{});
}
return false;
})
}
}
$.fn[plug] = function(options) {
//判断this是否是form
标签
if (!this.is("form")) {
throw new Error("the trgger is not form tag");
}
$.fn.extend(this,__PROTOTYPE__);
this._init();
this._bind();
return this;
}
$.fn[plug].extendRules = function(news) { //根据业务需求
增加rule
$.extend(__RULES__,news);
}
},"validator");
//这是调用插件的js
$(function() {
$.fn.validator.extendRules({
cardid: function() {
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.val());
}
})
$(".member-forms").validator({
triggerEvent: "blur"
})
.on("error",function(event,$errFiles) {
return false;
})
.on("success",function(event) {
this.submit();
return false;
});
});
HTML：
