JS表单验证(原创)

   本文章在纯css按钮，完美兼容浏览器 的基础上延伸的，直接贴上代码，有需要的朋友自查。

 

 

var is_click = false;
var reresh_url = '/index.php/admin/code/index2';
var default_regs = {'num':/^[0-9]+\.{0,1}[0-9]{0,2}$/,
                   'tel':/^([0-9]{11})?$/,
				   'cn':/^[\u4E00-\u9FA5]+$/,
				   'email':/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
				   'qq':/^[0-9]{4,12}/}

$(document).ready(function(){
	$('.input').focus(function(){
		hidde_error();
	});
});
function submit(form_id, submit_btn_id){
	if(is_click == true){
		return;
	}
	init_btn(submit_btn_id);
	var method = $('#'+form_id).attr('method');
	var url = $('#'+form_id).attr('action');
	var param = $('#'+form_id).serializeArray();

	if(!check_val(form_id)){
		recover_bnt(submit_btn_id);
		return;
	}
	$.ajax({ 
		type: method,
		url: url,
		data: param,
		dataType: 'json',
		error:function(){
			recover_bnt(submit_btn_id);
		},
		success: function(data){
			recover_bnt(submit_btn_id);
			if(data.error == 0){
//				alert(data.msg);
				show_state(4, data.msg);
				return ;
			}
			reresh_code();
			show_error(data.msg);
  		}
	});
}

/**********************************************************************************************************form check************************************************************************************/
function check_val(form_id){
	var is_check = true;
	$('#'+form_id).find('.check').each(function(){
		var input_val = $(this).val();
		var theme = $(this).attr('theme');
		var params = init_params($(this));
		
		var check_result = do_checking(theme,input_val, params);
		if(!check_result){
			is_check = false;
			return false;
		}
	});
	return is_check;
}
function do_checking(theme, input_val, params){
	var check_all = true;
	for(var key in params){  
	   var check_func = 'check_'+key;
	   var check = true;
	   if(function_exists(check_func)){
	   	  check = eval(check_func)(theme, input_val, params[key]);
	   }
	   if(!check){
	   	 check_all = false;
	     break;
	   }  
	}
	return check_all;  
}

function init_params(node){
	var require = attribute_exists(node,'require')?node.attr('require'):false;
	var max = attribute_exists(node,'max')?node.attr('max'):false;
	var min = attribute_exists(node,'min')?node.attr('min'):false;
	var reg = attribute_exists(node,'reg')?node.attr('reg'):false;
	var params = {'require':require, 'max':max, 'min':min, 'reg':reg}
	return params;
}
function check_require(theme, input_val, require){
	var is_check = true;
	if(require && (input_val =='' || input_val == null)){
		show_error(theme+'不能为空');
		is_check = false;
	}
	return is_check;
}
function check_max(theme, input_val, max){
	var is_check = true;
	if(parseInt(max) < str_length(input_val)){
		show_error(theme+'最多'+max+'字符');
		is_check = false;
	}
	return is_check;
}
function check_min(theme, input_val, min){
	var is_check = true;
	if(parseInt(min) > str_length(input_val)){
		show_error(theme+'至少'+min+'字符');
		is_check = false;
	}
	return is_check;
}
function check_reg(theme, input_val, reg){
	var is_check = true;
	var func_name = 'reg_'+reg;
	if(reg == '' || reg ==null || reg == false){
		is_check = true;	
	}else if(default_regs.hasOwnProperty(reg)){
		is_check = reg_default(theme, input_val, default_regs[reg]);
	}else{
		is_check = reg_type(theme, input_val, reg);
	}
	return is_check;
}

function reg_default(theme, input_val, regExp){
	var is_check = true;
	if(!regExp.test(input_val)){
		show_error(theme+'格式不正确');
		is_check = false;
	}
	return is_check;
}

function reg_type(theme, input_val, reg){
	return true;
}
/**********************************************************************************************************ajax form************************************************************************************/
function reresh_code(){
	$('.img_code').attr('src',reresh_url);
}

function recover_bnt(submit_btn_id){
	is_click = false;
	$('#'+submit_btn_id).removeClass('loading');
}
function init_btn(submit_btn_id){
	is_click = true;
	$('#'+submit_btn_id).addClass('loading');
}
function hidde_error(){
	$('.error').slideUp();
}
function show_error(msg){
	$('.error').html(msg);
	$('.error').slideDown();
}
/*
 * 状态弹出框函数
 * @param {Object} i
 * @param {Object} msg
 */
function show_state(i,msg){
	var tip = "";
	switch(i){
		case 1:
			tip = "服务器繁忙，请稍后再试。";
		break;
		case 4:
			tip = "设置成功！";
		break;
		case 5:
			tip = "数据拉取失败";
		break;
		case 6:
			tip = "正在加载中，请稍后...";
		break;
	}
	if(msg != ''){
		tip = msg
	}
	ZENG.msgbox.show(tip, i, 1500);
}

/**********************************************************************************************************Base Method************************************************************************************/
function str_length(str){
	return str.length;
}
function function_exists(func_name){
	var exists = false;
	if(func_name in window){
	   	exists = true;
	}
	return exists;
}
function attribute_exists(obj, attr_name){
	return typeof(obj.attr(attr_name))!="undefined";
}