JS 验证插件

最新推荐文章于 2022-10-26 00:00:21 发布

原创最新推荐文章于 2022-10-26 00:00:21 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

25 篇文章

订阅专栏

javascript

13 篇文章

订阅专栏

本文介绍了一个基于JavaScript的表单验证插件，通过自定义验证规则实现对表单输入的有效性和格式进行检查。插件支持多种验证方式，如字符串长度验证、正则表达式匹配、比较验证及Ajax远程验证等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
			};
		},
		//数字自动-1
		spinnerUp: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);
		},
		//数字自动+1
		spinnerDown: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"});