日期:2014-05-16  浏览次数:20658 次

ajax提交form,同时提供form表单验证

? ?本文章在纯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);
}

fu