这是一款极简洁的表单校验插件，仅50行代码，属于半封装模式，可任意编写业务逻辑代码，核心代码如下：

(function(){    // 校验插件    if(!$.fn.hasOwnProperty('verify')){        $.fn.verify = function(config) {            var fields = [], item;            if (!config) return;            // 判断是否函数            function isFunction(obj) {                return !!(obj && obj.constructor && obj.call && obj.apply);            }            // 表单提交校验(全部)            function handleSubmit() {                var  i, errors = false, len = fields.length;                for (i = 0; i < len; i++) {                    if (!fields[i].testValid()) errors = true;                }                if (errors) return false;                if (isFunction(config.success)) return config.success();            }            function process(opts, selector) {                var field = $(selector),                    error = {message: opts.message || ''},                    errorEl = config.errorTemplate(error);                // 将单个input事件对象追加到数组中，提交表单时遍历执行                                    fields.push(field);                // 核心处理方法                field.testValid = function testValid() {                    var temp, error, el = $(this), val = el.val();                    error = !opts.test(val);                    if (error) {                        el.after(errorEl);                        return false;                    } else {                        temp = errorEl.get(0);                        temp.parentNode && temp.parentNode.removeChild(temp);                        return true;                    }                };                // 单个input元素注册失焦事件                field.on('blur', field.testValid);            }            // 遍历对象            for(item in config.fields) {                process(config.fields[item], item)            }            // 提交按钮注册事件            if (config.submitButton) {                $(config.submitButton).click(handleSubmit);            } else {                this.on('submit', handleSubmit);            }            // 返回集合，供调用            return fields;                    }    }    })();

插件调用方法如下：

(function(){    // 注册校验    $('#register').verify({        fields:{            //选中名字字段，设置校验规则            '#register input[name="phone"]':{                //错误提示信息                message:'手机号码格式不正确，请重新输入',                //校验规则，返回布尔值，true则成功，false则失败，可在此回调函数中插入您的业务逻辑，最终返回bool值就好，极方便                test:function(val){                    var reg = /^(1[3-8][0-9])\d{8}$/;                    return reg.test(val);                }            },            '#register input[name="password"]':{                message:'请输入正确格式的密码',                test: function (val) {                    if (!val) return false;                    var reg = /^[a-zA-Z0-9]{6,20}$/;                    return reg.test(val);                }            },            '#register input[name="repassword"]':{                message:'两次密码输入不一致！',                test:function(val){                    var password = $('input[name="password"]').val();                    if(password != val) {                        return false;                    } else {                        return true;                    }                }            }                                    },        // 错误模板，设置装载错误信息的容器，插入上面设置的错误提示信息        errorTemplate:function(error){                        return $('
    
     ' + error.message + '
    
');        },        //校验成功后的回调方法，可插入校验成功后要执行的逻辑代码        success:function(){            //coding~~        }                //表单提交按钮，若未设置，则为默认的form.submit;        submitButton: '#register .submit'       });          })

原本是想在插件内封装一些固定的表单校验方法，但后来发现各种业务需求千奇百怪，简直众口难调，固以此方式呈现，只封装通用的校验流程，业务逻辑自行穿插，美其名曰：”半封装“，具体优劣各位看官自行研究了，当然，更希望您能够分享自己的见解～～

下附传送门，详细测试demo请自行跳转下载，不谢！