/** * @version 0.1 * @author: Smily.Liang * @company: MikeCRM * @date: 2013-8-29 update * @copyright: Copyright (c) MikeCRM(http://www.mikecrm.com) * --------------------------------------------------------- * 功能: * 1、input框的验证(required>maxlength>minlgth>email>phone>equalTo>remote>checkboxMax>checkboxEqual>checkboxMin) **/ (function($) { $.fn.mikeValidate = function(options){ //初始化数据 var defaults = { rules: { //初始化规则 required: false, maxlength: false, minlength: false, email: false, equalTo: false, remote: false, checkboxMax: false, checkboxEqual: false, checkboxMin: false }, messages: { //初始化错误提示信息 required: "此项为必填项", maxlength: "太长了,不要输那么多", minlength: "太短了,多输一点啦", email: "请输入正确格式的电子邮件", equalTo: "两次输入不同,请重新输入", remote: "请修正该字段", checkboxMax: "多于限制选项数", checkboxEqual: "不等于限制选项数", checkboxMin: "少于限制选项数" }, onkeyup:true, onfocusout: true, onsubmit: true, submitHandler: function() { } }; options = jQuery.extend(defaults, options); // 验证各种组件是否符合标准 var _requiredField = function ( element ){ var count = 0; if( element.attr("type")=="checkbox" || element.attr("type")=="radio" ){ $("[name='"+element.attr("name")+"']").each(function(){ if($(this).attr("checked")){ count++; } }); return !count; // 有值时返回false; } else if(element.attr("type")=="text" || element.hasClass("textarea")){ var elementValue = element.val().replace(/\s/g,""); // 将空格处理之后进行判断 return !elementValue; } else if(element.attr("type")=="file"){ var elementFile = element.attr('hasFile'); return !elementFile; } else if(element.hasClass('starGroup')){ var _val = parseInt(element.attr('starselected')); if(_val > 0){ return false; } else { return true; } } }; //验证的方法——默认顺序:required>maxlength>minlength>email>phone>equalTo>remote>checkboxMax>checkboxEqual>checkboxMin function validate(element,type){ var errorType = "required",_field; if (options.rules.required !== true && options.rules.required !== false) { options.rules.required = options.rules.required(); } _field = _requiredField( element ); if (options.rules.required) { if ( _field && type!=='FOCUSOUT' ) {// if (element.val() == "") { return check.error(errorType,element); }else{ return maxlength(element); } }else{ if (element.val() == "" && (element.attr("type")=="text" || element.hasClass("textarea"))) { check.valid(element); } else { return maxlength(element); } } } function maxlength(element){ if (options.rules.maxlength) { errorType = "maxlength"; if ( element.val().length > options.rules.maxlength ) { return check.error(errorType,element); }else{ return minlength(element); } }else{ return minlength(element); } } function minlength(element){ if (options.rules.minlength) { errorType = "minlength"; if ( element.val().length < options.rules.minlength ) { return check.error(errorType,element); }else{ return email(element); } }else{ return email(element); } } function email(element){ if (options.rules.email) { errorType = "email"; if ( !/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(element.val()) ) { return check.error(errorType,element); }else{ return equalTo(element); } }else{ return equalTo(element); } } function equalTo(element){ if (options.rules.equalTo) { errorType = "equalTo"; if ( element.val() != options.rules.equalTo.val() ) { return check.error(errorType,element); }else{ return remote(element); } }else{ return remote(element); } } function remote(element){ if (options.rules.remote) { if (element.val()!=="") { errorType = "remote"; $.ajax({ type: "POST", dataType: "JSON", url: options.rules.remote.url, data: options.rules.remote.data, success: function(data){ if (data.flag) { return checkboxMax(element); // return check.valid(element); }else{ return check.error(errorType,element); } } }); } }else{ return checkboxMax(element); // return check.valid(element); } } function checkboxMax(element){ if (options.rules.checkboxMax) { errorType = "checkboxMax"; var checkNum = 0; if( element.attr("type")=="checkbox"){ $("[name='"+element.attr("name")+"']").each(function(){ if($(this).attr("checked")){ checkNum++; } }); if ( checkNum > options.rules.checkboxMax) { return check.error(errorType,element); }else{ return checkboxEqual(element); } }else{ return checkboxEqual(element); } }else{ return checkboxEqual(element); } } function checkboxEqual(element){ if (options.rules.checkboxEqual) { errorType = "checkboxEqual"; var checkNum = 0; if( element.attr("type")=="checkbox"){ $("[name='"+element.attr("name")+"']").each(function(){ if($(this).attr("checked")){ checkNum++; } }); if ( checkNum == options.rules.checkboxEqual ) { return checkboxMin(element); }else{ return check.error(errorType,element); } }else{ return checkboxMin(element); } }else{ return checkboxMin(element); } } function checkboxMin(element){ if (options.rules.checkboxMin) { errorType = "checkboxMin"; var checkNum = 0; if( element.attr("type")=="checkbox"){ $("[name='"+element.attr("name")+"']").each(function(){ if($(this).attr("checked")){ checkNum++; } }); if ( checkNum < options.rules.checkboxMin) { return check.error(errorType,element); }else{ return check.valid(element); } }else{ return check.valid(element); } }else{ return check.valid(element); } } //验证的结果 var check ={ valid: function(element){ if( element.attr("type")=="checkbox" || element.attr("type")=="radio" ){ element.closest("div").siblings(".title").find("label.error").remove(); } else if(element.attr("type")=="text"|| element.hasClass("textarea") ){ element.removeClass("error"); element.closest("div").siblings(".title").find("label.error").remove(); } else if(element.attr("type")=="file"){ element.parent().removeClass("error"); element.parent().parent().siblings(".title").find("label.error").remove(); } else if(element.hasClass('starGroup')){ element.parent().siblings(".title").find("label.error").remove(); } return true; }, error: function(errorType,element){ if( element.attr("type")=="checkbox" || element.attr("type")=="radio" ){ element.closest("div").siblings(".title").find("label.error").remove(); element.nextAll().andSelf().last().closest("div").siblings(".title").append(""); } else if(element.attr("type")=="text"|| element.hasClass("textarea") ){ element.addClass("error"); element.parent().siblings(".title").find("label.error").remove(); element.parent().siblings(".title").append(""); } else if(element.attr("type")=="file"){ element.parent().addClass("error"); element.parent().parent().siblings(".title").find("label.error").remove(); element.parent().parent().siblings(".title").append(""); } else if(element.hasClass('starGroup')){ element.parent().siblings(".title").find("label.error").remove(); element.parent().siblings(".title").append(""); } // var labelWidth = element.closest(".locked").find(".title").width()+70; // element.closest(".locked").find("label.error").css("left",labelWidth); return false; } }; return this.each(function(){ // 绑定自定义事件,触发提交验证 $(this).bind("submitValidate", function(e){ validate($(e.target)); }); //input正在输入时验证——默认为true if (options.onkeyup) { $(this).keyup(function(){ validate($(this)); }); if( $(this).attr("type")=="checkbox" || $(this).attr("type")=="radio" ){ $(this).change(function(){ validate($(this)); }); } } //input失去焦点时进行验证——默认为true if (options.onfocusout) { $(this).focusout(function(){ validate($(this),'FOCUSOUT'); }); } if($(this).hasClass('starGroup')){ $(this).click(function() { validate($(this)); }); } //点击class为validate_submit的提交按钮式先进行验证——默认为true if (options.onsubmit) { $(this).closest("form").find(".validate_submit").unbind("click"); $(this).closest("form").find(".validate_submit").bind("click",function(){ $(this).closest("form").find("input").each(function(){ $(this).trigger("submitValidate"); }); $(this).closest("form").find("textarea").each(function(){ $(this).trigger("submitValidate"); }); $(this).closest("form").find(".starGroup").each(function(){ $(this).trigger("submitValidate"); }); if ($("label.error").length === 0) { options.submitHandler(); } else { return false; } //var errorCount = 0; //这里也可以添加其他验证 //$(this).closest("form").find("input").each(function(){ //if( !validate($(this)) ){ // errorCount++; // } //}); //errorCount==0,说明验证通过,提交表单 //if (errorCount == 0) { // options.submitHandler(); //}; }); } }); }; })(jQuery);