JS 验证插件

js编写的验证插件，貌似使用比较复杂，主要是没有精力去重构优化代码，记录备用

/* * name:表达验证插件 * auth:曾小斌 * version:1.0.0 * createdate:2013-11-15 */var formValidators=[];//拦截表单提交$.fn.formValidators=function(callback){$(this).click(function(){var isValidator=true;for(var i in formValidators){var $input=formValidators[i],validator=$input.attr("validator"),selector=$input.attr("concateselector");if(validator=="false"||typeof validator=='undefined'){if(typeof selector!='undefined'){$(selector).blur();}else{$input.blur();}}}for(var i in formValidators){var $input=formValidators[i],validator=$input.attr("validator"),selector=$input.attr("concateselector");if(validator=="false"||typeof validator=='undefined'){if(typeof selector!='undefined'){$(selector).focus();}else{$input.focus();}return isValidator=false;}}if(isValidator){callback();}});}$.fn.formValidator=function(options){//缓存当前DOM对象var $document=$(document),$this=$(this),$target=$("<span class=\"tip\"></span>").insertAfter($this),selector=$this.selector;//临时全局变量var temp={ajaxHandle:null};//图标类型var icon={info:"icon_info",ok:"icon_ok",error:"icon_error",wait:"icon_wait",none:null};var defaults={show:"",focus:"",success:"",empty:"",validator:{type:"string",spinner:false,min:null,max:1000,error:""},compare:{target:null,regexp:null,error:""},concateCompare:null,concateSelector:null,ajax:{url:null,success:"",wait:"",error:""},regExp:{reg:null,error:""},forbidKey:null};var option=$.extend({},defaults,options);option.validator=$.extend({},defaults.validator,options.validator);option.compare=$.extend({},defaults.compare,options.compare);option.ajax=$.extend({},defaults.ajax,options.ajax);option.regExp=$.extend({},defaults.regExp,options.regExp);//缓存ajax控件原始值if(typeof options.ajax!="undefined"){$this.attr("oldValue",$this.val());}//缓存委托的控件if(option.concateSelector!=null){selector=option.concateSelector;$this.attr("concateSelector",selector);}//缓存到数组中formValidators.push($this);//服务层var service={//封装html文字html:function(ico,text,$that){var html_text="";if(ico!=null){html_text='<span class="'+ico+'">'+text+'</span>';}$that||$target.html(html_text);},//执行验证validator:function(){var value=$this.val(),oldvalue=$this.attr("oldvalue");len=value.length;$this.removeClass("input_success").removeClass("input_wait").addClass("input_error").attr("validator",false);//验证为空的时候if(option.validator.type=="string"&&option.validator.min!=null&&len==0){return this.html(icon.error,option.empty);}//验证正则表达式else if(option.validator.type=="string"&&option.regExp.reg!=null&&!option.regExp.reg.test(value)){return this.html(icon.error,option.regExp.error);}//可填可不填的时候，不验证这个字段  该字段可以不填  但是填的话一定要正确else if(option.validator.type=="string"&&option.validator.min==null&&len==0){$this.removeClass("input_error").attr("validator",true);return this.html(icon.none,null);}//验证最大长度、最小长度else if(option.validator.type=="string"&&((option.validator.min!=null&&(len<option.validator.min||stringUtil.isNull(value)))||len>option.validator.max)){return this.html(icon.error,option.validator.error);}else if(option.validator.type=="number"&&(!$.isNumeric(value)||stringUtil.isNull(value)||value<option.validator.min || value>option.validator.max)){return this.html(icon.error,option.validator.error);}else if(stringUtil.isNotNull(option.compare.target)&&option.compare.regexp=="=" && $(option.compare.target).val()!=value){return this.html(icon.error,option.compare.error);}else if(stringUtil.isNotNull(option.ajax.url)&&stringUtil.isNotNull(value)&&oldvalue!=value){$this.removeClass("input_error").addClass("input_wait");//取消掉上次等待中的AJAX请求temp.ajaxHandle&&temp.ajaxHandle.abort();var ajaxPara={},ajaxUrl="";var startIndex=option.ajax.url.lastIndexOf("&"),endIndex=option.ajax.url.lastIndexOf("=");if(endIndex>startIndex&&startIndex!=-1){ajaxPara[option.ajax.url.substring(startIndex+1,endIndex)]=value;ajaxUrl=option.ajax.url.substr(0,startIndex);}temp.ajaxHandle=$.post("manage/zui_servlet?sid="+ajaxUrl,ajaxPara,function(data){data=JSON.parse(data);if(typeof data=="object"){if(data.recode==1&&!data.data){$this.removeClass("input_wait").addClass("input_success").attr("validator",true);return service.html(icon.ok,option.ajax.success);}else{$this.removeClass("input_wait").addClass("input_error");return service.html(icon.error,option.ajax.error);}}else{$this.removeClass("input_wait").addClass("input_error");return service.html(icon.error,"验证失败，服务器出现错误！");}});return this.html(icon.wait,option.ajax.wait);}else{if(stringUtil.isNotNull(option.concateCompare)&&stringUtil.isNotNull($(option.concateCompare).val())){$(option.concateCompare).blur();}$this.removeClass("input_error").addClass("input_success").attr("validator",true);return this.html(icon.ok,option.success);};},//数字自动-1spinnerUp:function(){var val=$this.val();if(!$.isNumeric(val)){val=0;$this.val(val);service.validator();}$this.val(val<option.validator.max?++val:option.validator.max);},//数字自动+1spinnerDown:function(){var val=$this.val();if(!$.isNumeric(val)){val=0;$this.val(val);service.validator();}$this.val(val>option.validator.min?--val:0);},//启动初始化start:function(){var that=this;//获取焦点事件$document.on("focus",selector,function(){$this.removeClass("input_success").removeClass("input_wait").removeClass("input_error");if(stringUtil.isNotNull(option.focus)){that.html(icon.info,option.focus);}});//失去焦点时候触发事件$document.on("blur",selector,function(){that.validator();});//如果设置了禁止键if(stringUtil.isNotNull(option.forbidKey)){$document.on("keydown",selector,function(e){var key = window.event ? e.keyCode : e.which;if(option.forbidKey.test(key)){e.returnValue = false;e.preventDefault();return false;}});}//如果是数字类型，转换为数字控件-只能输入数字if(option.validator.type=="number"){$document.on("keydown",selector,function(e){var key = window.event ? e.keyCode : e.which;//大键盘，小键盘，退格、制表、方向、delete、home、end、F5、回车键if((e.ctrlKey&&(key==65||key==67||key==86||key==88))||(key > 95 && key < 106) || (key > 47 && key < 60)||/^[89]$|^3[5679]$|^46$|^116$|^13$/.test(key)){return true;}else if(option.validator.spinner&&key==38){that.spinnerUp();}else if(option.validator.spinner&&key==40){that.spinnerDown();}else{e.returnValue = false;e.preventDefault();return false;}});if(option.validator.spinner){$this.wrap("<div class='relative'></div>");$('<i class="icon-sort-up spinner_up"></i>').insertAfter($this).on("click",that.spinnerUp);$('<i class="icon-sort-down spinner_down"></i>').insertAfter($this).on("click",that.spinnerDown);}$this.attr("maxlength",option.validator.max.toString().length);}else{$this.attr("maxlength",option.validator.max);}}};service.start();};//工具类var stringUtil={isNull:function(val){return val==undefined||val=="null"||val==null||val=="";},isNotNull:function(val){return !stringUtil.isNull(val);}};

使用DEMO

//点击保存按钮    $("#bt_save").formValidators(addSchool);    $("#input_groupName").formValidator({focus:"请输入个人学校名称",empty:"您还没有输入学校名称",validator:{min:0,max:60},ajax:{url:"isExistGroupName&groupName=",wait:"正在检测学校名称是否存在",error:"错误！该学校名称已经存在"}});    $("#input_groupType").formValidator({focus:"请选择学校类型",empty:"您还没有选择学校类型",validator:{min:0,max:2}});

//点击保存按钮    $("#bt_save").formValidators(addTeacher);    $("#input_nickname").formValidator({focus:"4-20位，注册成功后用户名不可修改",empty:"您还没有输入用户名",validator:{min:4,max:20,error:"用户名长度错误，应该为4-20位！"},regExp:{reg:/^[a-zA-Z]/,error:"用户名格式错误，只能以字母开头"},ajax:{url:"isExistPhoneOrEmail&nickname=",success:"",wait:"正在检测用户名是否可用",error:"用户名已经被使用！"},forbidKey:/^32$/});$("#input_password").formValidator({focus:"密码需由6-16位组成",empty:"您还没有输入密码",validator:{min:6,max:16,error:"密码太短，最少为6位。"},concateCompare:"#input_password_retry"});$("#input_password_retry").formValidator({focus:"请再次输入密码",empty:"您还没有输入确认密码",validator:{min:6,max:16,error:"确认密码太短，最少为6位。"},compare:{target:"#input_password",regexp:"=",error:"密码不一致，请再次确认"}});$("#input_username").formValidator({focus:"请输入真实姓名",empty:"您还没有输入真实姓名",validator:{min:0,max:20}});$("#input_email").formValidator({focus:"请输入个人邮箱",empty:"您还没有输入个人邮箱",validator:{min:0,max:40},ajax:{url:"isExistPhoneOrEmail&email=",success:"",wait:"正在检测邮箱是否可用",error:"邮箱已经被其他用户名绑定，请更换邮箱！"}});$("#input_phone").formValidator({focus:"请输入手机号码，此项也可以不填",validator:{max:20},ajax:{url:"isExistPhoneOrEmail&phone=",success:"，可以使用",wait:"正在检测手机号码是否已经被绑定",error:"手机号码已经被其他用户名绑定了，请更换手机号码！"}});$("#input_gradeCourseId").formValidator({focus:"请选择任教信息",empty:"您还没有选择任教信息",validator:{min:0},concateSelector:"#gradeId,#courseId"});