jquery验证插件进一步进行封装（easy-check）

最新推荐文章于 2021-04-03 18:30:06 发布

iteye_20313

最新推荐文章于 2021-04-03 18:30:06 发布

阅读量152

点赞数

分类专栏： jquery 文章标签： json javascript ViewUI

本文链接：https://blog.csdn.net/iteye_20313/article/details/82522704

版权

jquery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、easy-check.js，核心代码如下（要运行demo或有什么问题，可以留言）

var easyCheck;
var defaultOptions = {
	showClass:'show_validate_div', 	//提示信息显示容器class
	parentTag:'tr',				   	//输入框和提示信息共同父类标签
	successImage:'./right.gif',	   	//验证成功提示图片路径
	ErrorImage:'./error.gif',	   	//验证失败提示图片路径
	imageHeight:23,	   				//提示图片高度
	imageWidth:23,	   				//提示图片宽带
	autoAjax:false,	   				//是否鼠标blur是ajax验证（如果否，则提交时ajax验证）
}
var settings,showClass,parentTag,successImage,ErrorImage,imageHeight,imageWidth,autoAjax;
$.easyCheck = function(options){
	settings =  $.extend(defaultOptions,options);
	showClass = settings.showClass; 
	parentTag = settings.parentTag; 
	successImage = settings.successImage; 
	ErrorImage = settings.ErrorImage; 
	imageHeight = settings.imageHeight; 
	imageWidth = settings.imageWidth; 
	autoAjax = settings.autoAjax;
	
	 $('input').focus(function(){
        var show_div_node = $(this).parents(parentTag).find('.' + showClass);
		var input_val = $(this).val();
		var objItem = $(this);
		if(input_val=='' || input_val==null){
			console.info("这是info");
			showMessage(objItem.attr('default'),show_div_node,false,false);
		}
        show_div_node.show();
		
    }).blur(function(){
    
        var show_div_node = $(this).parents(parentTag).find('.' + showClass);
        var input_val = $(this).val();
        var isError = false;
        var objItem = $(this);
        var validArr = validate(objItem, input_val, show_div_node,autoAjax);
        isError = validArr['isCheck'];
		var isAjax = validArr['isAjax'];
		var isCard = validArr['isCard'];
        if (isError && isAjax==false && isCard==false) {
            showMessage('格式正确', show_div_node, false,true);
        }
    });
    $("form").submit(function(){
        var isSubmit = true;
        $(this).find("input").each(function(){
			var input_val = $(this).val();
        	var objItem = $(this);
			var show_div_node = $(this).parents(parentTag).find('.' + showClass);
			 show_div_node.show();
			var validArr = validate(objItem, input_val, show_div_node,true);
			var isValidate = validArr['isCheck'];
			if(isValidate==false){
				isSubmit = isValidate;
			}
        });
        return isSubmit;
    });
}



/**
 * 验证属性介绍
 * 1、require，为空验证，取值 true Or false
 * 2、min或max，长度最小或最大值验证，可以只有一个属性或两个同时有
 * 3、reg,正则匹配，
 * 	  a、如果reg值是num(整数)、tel(电话或座机)、card(身份证)、chinese(中文)、email(邮箱)、qq(qq)，
 * 	     其中一种，按对应系统提供的正则表达式匹配。
 * 	  b、如果reg值是一个正则表达式，按提供的正则匹配。
 * 	  c、reg属性对应一个regMsg属性，regMsg属性可有可无。如果有，reg验证出错，就会显示regMsg内容，如果没有，出错显示系统默认提示。		  
 * 4、url,ajax远程验证属性，默认按照input框属性name名字提交到后台，后台可以根据改名字，获取input输入内容，进行验证。
 * 	  验证过后需要返回json格式数据，包括两个属性，error(1、验证错误。0、验证成功),msg（验证成功或错误的提示信息）
 */
function validate(objItem,inputVal,showDivNode,ajaxValidate){
	var isCheck = true;
	var isAjax = false;
	var isCard = false;
	var validArr = new Array();
	if(isExistNode(objItem,"require")){
		isAjax = false;
		isCard = false;
		var requireVal = objItem.attr('require');
		if(requireVal=='false' && (inputVal=='' || inputVal==null)){
			showDivNode.hide();
			return true;
		}
		isCheck = checkNull(requireVal,inputVal,showDivNode);
	}
	if(isExistNode(objItem,"min") && isCheck==true){
		isAjax = false;
		isCard = false;
		var min = objItem.attr("min");
		isCheck = checkLength(min,0,inputVal,showDivNode);
	}
	if(isExistNode(objItem,"max") && isCheck==true){
		isAjax = false;
		isCard = false;
		var max = objItem.attr("max");
		isCheck = checkLength(0,max,inputVal,showDivNode);
	}
	if (isExistNode(objItem,"reg") && isCheck == true) {
		isAjax = false;
		var regMsg = false;
		if(isExistNode(objItem,"regMsg")){
			regMsg = objItem.attr("regMsg");
		}
		var regStr = objItem.attr("reg");
		if(regStr == 'card'){
			isCard = true;
			var reArr = checkCard(inputVal,showDivNode,regMsg);
			if(reArr['error'] == true){
				isCheck = false;
			}
		}else{
			isCard = false;
			isCheck = checkReg(regStr,inputVal,showDivNode,regMsg);
		}
	}
	if (isExistNode(objItem,"url") && isCheck == true) {
		isCard = false;
		if(ajaxValidate){
			isAjax = true;
			var ajax_url = objItem.attr("url");
			var inputName = objItem.attr("name");
			ajax_url += "?"+inputName+"="+inputVal;
			isCheck = ajaxVlidate(ajax_url,showDivNode);
		}else{
			isAjax = false;
			isCheck = true;
		}
		
	}
	validArr['isCheck'] = isCheck;
	validArr['isAjax'] = isAjax;
	validArr['isCard'] = isCard;
	return validArr;
}
//空验证
function checkNull(requireVal,inputVal,showDivNode){
	var isCheck = true;
	if(requireVal == 'true' && (inputVal=='' || inputVal==null)){
		isCheck = false;
		showMessage('不能为空',showDivNode,true,false);
	}
	return isCheck;
}
//长度验证
function checkLength(min,max,inputVal,showDivNode){
	var isCheck = true;
	if(inputVal.length<min && min!=0){
		isCheck = false;
		showMessage('至少'+min+'字',showDivNode,true,false);
	}else if(inputVal.length>max && max!=0){
		isCheck = false;
		showMessage('至多'+max+'字',showDivNode,true,false);
	}
	return isCheck;
}
//正则验证
function checkReg(regStr,inputVal,showDivNode,regMsg){
	var isCheck = true;
	var reArr = getRegExp(regStr,regMsg);
	var regExp = reArr['reExp'];
	var errorMsg = reArr['errrMsg'];
	if(!regExp.test(inputVal)){
		isCheck = false;
		showMessage(errorMsg,showDivNode,true,false);
	}
	return isCheck;
}
function getRegExp(regStr,regMsg){
	var reExp = '';
	var errrMsg = '';
	if(regStr == 'email'){
		reExp =  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; //邮箱
		errrMsg = '请输入正确邮箱';
	}else if(regStr == 'num'){
		reExp = /^\d+$/;
		errrMsg = '只能输入整数';
	}else if(regStr == 'tel'){
		reExp = /^([0-9]{11})?$/;
		errrMsg = '请输入正确手机号';
	}else if(regStr == 'chinese'){
		reExp = /^[\u4E00-\u9FA5]+$/;
		errrMsg = '只能输入中文';
	}else if(regStr == 'qq'){
		reExp = /'^[0-9]{4,12}/;
		errrMsg = '请输入正确的qq号码';
	}else{
		reExp = new RegExp(regStr);
		errrMsg = '不符合正则规则';
	}
	if(regMsg!=false){
		errrMsg = regMsg;
	}
	var reArr = new Array();
	reArr['reExp'] = reExp;
	reArr['errrMsg'] = errrMsg;
	return reArr;
}
//ajax验证
function ajaxVlidate(url,showDivNode){
	var isCheck = true;
	var reArr = new Array();
	$.ajax({
	  type: 'GET',
	  url: url,
	  async:false, //同步
	  dataType: "json",
	  success: function(data){
		reArr['error'] = data.error;
		reArr['msg'] = data.msg;
	  }
	});
	if(reArr['error']=='1'){
		isCheck = false;
		showMessage(reArr['msg'],showDivNode,true,false);
	}else{
		isCheck = true;
		showMessage(reArr['msg'],showDivNode,false,true);
	}
	return isCheck;
}
//错误处理
function showMessage(message,showDivNode,isError,isValidate){
	
	var successHtml = '<div style="float:left;">';
		successHtml += 	'<img src="'+successImage+'" style="height:'+imageHeight+'px;width:'+imageWidth+'px;">';
		successHtml += '</div>';
		successHtml += '<span style="color:green;line-height:23px;margin-left:7px;">'+message+'</span>';
	
	if(isError){
		showDivNode.html(message);
		showDivNode.css('color','red');
		return;
	}
	if(isValidate){
		showDivNode.html(successHtml);
		return;
	}
		 
	showDivNode.html(message);	 
	showDivNode.css('color','green');
}
function isExistNode(objItem,nodeName){
	return typeof(objItem.attr(nodeName))!="undefined";
}
//验证身份证号
function checkCard(idcard,showDivNode,regMsg){ 
	var Errors=new Array("验证通过!","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证地区非法!"); 
	var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"xinjiang",71:"台湾",81:"香港",82:"澳门",91:"国外"} 
	var idcard,Y,JYM; 
	var S,M; 
	var idcard_array = new Array(); 
	
	idcard_array = idcard.split(""); 
	
	if(area[parseInt(idcard.substr(0,2))]==null){
		error = true;
		msg = Errors[4];
	};
	var reArr = new Array();
	var error = false;
	var msg = '';
	switch(idcard.length){ 
		case 15: 
			if ((parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){ 
				ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性 
			} 
			else{ 
				ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性 
			} 
			if(ereg.test(idcard)){
				error = false;
				msg = Errors[0];
			}else{
				error = true;
				msg = Errors[2];
			} 
			break; 
		case 18: 
			if( parseInt(idcard.substr(6,4)) % 4 == 0 || ( parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){ 
				ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式 
			} 
			else{ 
				ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式 
			} 
			if(ereg.test(idcard)){ 
				S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ; 
				Y = S % 11; 
				M = "F"; 
				JYM = "10X98765432"; 
				M = JYM.substr(Y,1); 
				if(M == idcard_array[17]){
					error = false;
					msg = Errors[0];
				}else{
					error = true;
					msg = Errors[3];
				} 
			}else{
				error = true;
				msg = Errors[2];
			} 
			break; 
			default: 
				error = true;
				msg = Errors[1];
			break; 
	}
	reArr['error'] = error;
	reArr['msg'] = msg;
	if(regMsg!=false && reArr['error']==true){
		reArr['msg'] = regMsg;
	}
	if(reArr['error']=='1'){
		showMessage(reArr['msg'],showDivNode,true,false);
	}else{
		showMessage(reArr['msg'],showDivNode,false,true);
	}
	return reArr; 
}

2、测试页面html,代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证框架demo</title>
<script type='text/javascript' src='/test/jquery.min.js'></script>
<script type='text/javascript' src='/test/easy-check.js'></script>
<style type="text/css">
	.show_validate_div{display:none;}
</style>
<script type="text/javascript">
	var options = {
//		showClass:'test_id', 	//提示信息显示容器class
	}
	$(document).ready(function(){
		$.easyCheck(options);
	});
</script>
</head>
<body>

<div style="width:500px;margin:0 auto;margin-top:200px;">
	<form>
	<table>
		<tr>
			<td>test  </td>
			<td><input type="text" require='false' name='uname' url='ajax.php' default='请输入用户名' autoAjax='true'></td>
			<td style="width:200px;"><div class="show_validate_div" style="display:block;">
					<div style="float:left;">
						<img src="./right.gif" style="height:23px;width:23px;">
					</div>
					<span style="color:green;line-height:23px;margin-left:7px;">用户名输入正确</span>
				</div>
			</td>
		</tr>
		<tr>
			<td>用户名  </td>
			<td><input type="text" require='false' name='uname' url='ajax.php' default='请输入用户名' autoAjax='true'></td>
			<td><div class="show_validate_div" style="display:block;"><span style="color:green;">请输入用户名</span></div></td>
		</tr>
		<tr>
			<td>姓名</td>
			<td><input type="text" require='true' min="2" max='4' reg='chinese' default='请输入姓名'></td>
			<td><div class="show_validate_div" ><span style="color:green;">请输入姓名</span></div></td>
		</tr>
		<tr>
			<td>昵称</td>
			<td><input type="text" require='true' reg='^\w{2}\d+$' regMsg='[2个字母简写]+[数字]' default='请输入昵称'></td>
			<td><div class="show_validate_div" ><span style="color:green;">请输入昵称</span></div></td>
		</tr>
		<tr>
			<td>电话</td>
			<td><input type="text"  require='true'  default='电话或座机'></td>
			<td><div class="show_validate_div"><span style="color:green;">电话或座机</span></div></td>
		</tr>
		<tr>
			<td>身份证</td>
			<td><input type="text"  require='true' reg='card' regMsg='身份证自定义错误信息测试' default='请输入身份证'></td>
			<td><div class="show_validate_div"><span style="color:green;">请输入身份证</span></div></td>
		</tr>
		<tr>
			<td>价格</td>
			<td><input type="text"  require='true' reg='num' default='请输入价格'></td>
			<td><div class="show_validate_div"><span style="color:green;">请输入价格</span></div></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text"  require='true' reg='email' regMsg='请输入正确的邮箱' default='请输入正确的邮箱'></td>
			<td><div class="show_validate_div" ><span style="color:green;">常用邮箱</span></div></td>
		</tr>
		<tr>
			<td></td>
			<td><input type="submit" value="提交"></td>
			<td></div></td>
		</tr>
	</table>
</form>
</div>
</body>
</html>

iteye_20313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery验证插件进一步进行封装（easy-check）

1、easy-check.js，核心代码如下（要运行demo或有什么问题，可以留言） var easyCheck;var defaultOptions = { showClass:'show_validate_div', //提示信息显示容器class parentTag:'tr', //输入框和提示信息共同父类标签 successImage:'./ri...
复制链接

扫一扫

专栏目录