jquery表单开发常用函数-包括radio单选框单击取消选择事件

jquery表单开发常用函数
// 获取指定name控件的值
function getNameVal(attr_name, parent) {
	var els;
	if (parent) {
		els = parent.find('[name=' + attr_name + ']');
	} else {
		els = $('[name=' + attr_name + ']');
	}
	
	if (els.length <= 0) {
		return '';
	}
	var el = els[0];
	var node_name = el.nodeName.toLowerCase();
	var val;
	
	if (node_name == 'input') {
		var type = el.type;
		if (type == 'radio') {
			if (parent) {
				val = parent.find('[name=' + attr_name + ']:checked').val();
			} else {
				val = $('[name=' + attr_name + ']:checked').val();
			}
		} else if (type == 'checkbox') {
			val = getCheckboxVal(attr_name, parent);
		} else {
			val = $(el).val();
		}
	} else if (node_name == 'textarea') {
		val = $(el).val();
	} else if ($(el).find('input[type=file]').length > 0 || $(el).find('img[data-source="upload"]').length > 0) {
		// 如果是图片
		val = getImgSrc(attr_name, parent);
	} else {
		val = '';
	}
	val = val || '';
	return val;
}

// 设置指定name控件的值
function setNameVal(attr_name, value, parent) {
	var els;
	if (parent) {
		els = parent.find('[name=' + attr_name + ']');
	} else {
		els = $('[name=' + attr_name + ']');
	}
	if (els.length <= 0) {
		return '';
	}
	var el = els[0];
	var node_name = el.nodeName.toLowerCase();
	value = (value !== null && value !== undefined) ? value + '' : '';
	if (node_name == 'input' && value) {
		var type = el.type;
		if (type == 'radio') {
			if (parent) {
				parent.find("input[name="+attr_name+"][value=" + value + "]").attr("checked", true);
			} else {
				$("input[name="+attr_name+"][value=" + value + "]").attr("checked", true);
			}
		} else if (type == 'checkbox') {
			setCheckboxVal(value, attr_name, parent);
		} else {
			$(el).val(value);
		}
	} else if (node_name == 'textarea' && value) {
		$(el).val(value);
	} else if ($(el).find('input[type=file]').length > 0 || $(el).find('img[data-source="upload"]').length > 0) {
		// 如果是图片
		setImgSrcArr(attr_name, parent);
	}
}

// 获取提示语tip
function getTip(attr_name, parent, c_message) {
	var els;
	if (parent) {
		els = parent.find('[name=' + attr_name + ']');
	} else {
		els = $('[name=' + attr_name + ']');
	}
	if (els.length <= 0) {
		return '';
	}
	var el = els[0];
	var node_name = el.nodeName.toLowerCase();
	var message;
	c_message = c_message || $(el).attr('tip') || '';
	if (node_name == 'input') {
		var type = el.type;
		if (type == 'radio') {
			message = '请选择' + c_message;
		} else if(type == 'checkbox') {
			message = '请至少选择' + c_message + '一项';
		} else {
			message = '请填写' + c_message;
		}
	} else if (node_name == 'textarea') {
		message = '请填写' + c_message;
	} else if (node_name == 'div') {
		message = '请上传' + c_message + '的图片';
	} else{
		message = '请填写';
	}
	return message;
}

// 获取复选框的值
function getCheckboxVal(name, parent) {
	var els;
	if (parent) {
		els = parent.find('[name='+name+']:checked');
	} else {
		els = $('[name='+name+']:checked');
	}
	var arr = [];
	for (var i=0;i<els.length;i++) {
		arr.push(els[i].value);
	}
	return arr.length > 0 ? JSON.stringify(arr) : '';
}
// 设置复选框的值
function setCheckboxVal(arr, name, parent) {
	if (arr) {
		arr = JsonParse(arr);
		for (var i=0;i<arr.length;i++) {
			var val = arr[i];
			if (parent) {
				parent.find("input[name="+name+"][value=" + val + "]").attr("checked", true);
			} else {
				$("input[name="+name+"][value=" + val + "]").attr("checked", true);
			}
		}
	}
}

// 监听radio值改变后，后面的元素显示与隐藏: data-toggle开关元素data-targrt与data-toggle-target目标切换元素
function radioToggle(parent) {
	// 初始化radio
	var m_arr;
	if (parent) {
		m_arr = parent.find('[data-toggle-target]');
	} else {
		m_arr = $('[data-toggle-target]');
	}
	for(var i=0;i<m_arr.length;i++) {
		var z1 = $(m_arr[i]);
		var m = z1.data('toggle-target');
		
		var z2 = $('[data-target='+m+']:checked').val();
		var z3 = $('[data-target='+m+']:checked').data('toggle');
		if (z2 && z3 == 'open') {
			// z1.show();
			z1.find('input,textarea,button').attr('disabled', false);
		} else {
			// z1.find('[data-source="upload"]').parents('.x-upload-item-box').remove();
			z1.find('input,textarea,button').attr('disabled', true);
		}
	}

	// radio监听事件
	$('[data-toggle]').off('change');
	$('[data-toggle]').on('change', function () {
		var toggle_val = $(this).data('toggle');
		var target_val = $(this).data('target');
		var target_el = $('[data-toggle-target='+target_val+']');

		if (toggle_val == 'open') {
			// target_el.show();
			target_el.find('input,textarea,button').attr('disabled', false);
		} else {
			// target_el.hide();
			clearFormControl(target_el);
		}
	})
}

// 清除表单控件
function clearFormControl(jq_el) {
	// 清除所有input和image
	jq_el.find('[data-source="upload"]').parents('.x-upload-item-box').remove();
	jq_el.find('button').attr('disabled', true)
	jq_el.find('input[type=text],input[type=tel],input[type=file],textarea').attr('disabled', true).val('');
	jq_el.find('input[type=checkbox],input[type=radio]').prop('checked', false).attr('disabled', true);
}

// 添加模板
function addTpl(tpl_id, replace_data) {
	var tpl_html = $('#' + tpl_id).html();
	var html_str = _.template(tpl_html)(replace_data);
	return html_str;
}

// 判断一个容器内的表单是否有填写至少一项
function hasContents(data_name, parent, has_pic) {
	var el;
	if (parent) {
		el = parent.find('[data-is-content='+data_name+']');
	} else {
		el = $('[data-is-content='+data_name+']');
	}
	// 普通表单控件
	var val_arr = el.find('input, textarea').serializeArray();
	// 图片元素
	var len = (has_pic && el.find('img[data-source="upload"]').length > 0 )? '1' : '';
	var str = '';
	$.each(val_arr, function (index, item) {
		str += item.value;
	})
	str += len;
	return !!str;
}

/**
 * @param {Object|Strinig} el 传入为对象时，直接绑定上传事件，如果是name属性值，则拼接后上传
 */
function addUploadEvent(el) {
	if ( (typeof el).toLowerCase() === 'object' ) {
		// 如果el是传入的DOM对象
		$(el).change(function(e) {
			caseImgup(e, { max_upload_count: 4 });
		});
	} else {
		el = '[name="' + el + '"]';
		if ($(el).length > 0) {
			$(el).find('input[type="file"]').eq(0).change(function(e) {
				caseImgup(e, { max_upload_count: 4 });
			});
		}
	}
}
/*
 * 图片上传
 * @param [Object] e file事件对象 
 * @param [Object] upload_config 上传配置
 * @param [Object] upload_config.max_upload_count 图片上传限制最大数
*/
function caseImgup(e, upload_config) {
	upload_config = upload_config || {};
	var default_upload_config = {
		max_upload_count: 4
	};
	for(var key in default_upload_config) {
		upload_config[key] = upload_config[key] || default_upload_config[key];
	}
	var ev = e || window.event;
	var docObj = ev.target || ev.srcElement;
	var fileList = docObj.files;
	var el_parents = $(docObj).parents('.x-upload-box')[0];
	var el_parent_item = $(docObj).parents('.x-upload-item-box')[0];
	
	if ($(el_parents).find('img[data-source="upload"]').length + fileList.length > upload_config.max_upload_count) {
		mui.alert("最多添加" + upload_config.max_upload_count + "张图片");
		fileList = {};
		return false
	}
	// mui.toast('图片上传中');
	/* 点击选中图片后上传获取回调 */
	var upimg = docObj.files[0];
	var filei = new FormData();
	filei.append('Filedata', upimg);
	for (var i = 0; i < fileList.length; i++) {
		// 请求上传图片接口
		com.uploadImg(filei, function(url) {
			// 插入已上传图片到DOM，需要把img的src处赋值为服务器返回资源地址
			setImgSrc(url, el_parent_item);
		});
	}
	return true;
}
/**
 * 插入图片
 * @param {String} src 图片资源地址
 * @param {ElementDOM|String} prev_node 插入地址的前一个节点,如果传入的是字符串,则必须是上传容器的name值
 */
function setImgSrc (src, prev_node, parent) {
	var jq_dom;
	if ( (typeof prev_node).toLowerCase() === 'string' ) {
		// 如果是字符串,则为容器name值
		if (parent) {
			jq_dom = parent.find("[name='" + prev_node + "']").find('.x-upload-item-box:last')[0];
		} else {
			jq_dom = $("[name='" + prev_node + "']").find('.x-upload-item-box:last')[0];
		}
		// data-source="upload"
	} else {
		jq_dom = prev_node;
	}
	var str = '<div class="x-upload-item-box xboximg">';
	str += '<div class="x-upload-item xitemimg1">'
	str += '<img data-preview-src="" data-preview-group="1" class="x-upload-img" data-source="upload" src="' + src + '" />'
	str += '<span class="x-upload-icon-del">X</span>';
	str += '</div></div>';
	if ( $(jq_dom).find('[data-source=upload]').length > 0 ) {
		$(jq_dom).after(str);
	} else {
		$(jq_dom).before(str);
	}
	
	//删除图片
	$('.x-upload-icon-del').click(function(del_e) {
		$(this).parents('.x-upload-item-box').eq(0).remove();
	});
}
// 批量设置图片
function setImgSrcArr(prev_node, arr, parent) {
	if (arr) {
		arr = JsonParse(arr);
		for(var i = 0; i < arr.length; i++) {
			setImgSrc(arr[i], prev_node, parent);
		}
	}
}
/**
 * @param {String} attr_name 上传文件容器的name值
 * @param {Boolean} [default=false] is_return_srcs 是否直接返回已上传图片src数组,false返回src数组
 */
function getImgSrc(attr_name, parent) {
	var nodes;
	if (parent) {
		nodes = parent.find("[name='" + attr_name + "']").find('img[data-source="upload"]');
	} else {
		nodes = $("[name='" + attr_name + "']").find('img[data-source="upload"]');
	}

	if (nodes.length <= 0) {
		return [];
	}
	var srcs = [];
	for(var i=0; i< nodes.length;i++){
	  srcs.push(nodes[i].getAttribute('src'));
	}
	return srcs.length > 0 ? JSON.stringify(srcs) : '';
}

/**
 * 给对象添加新属性
 * @param {Object} obj_source 赋值对象
 * @param {Object} obj_target 元数据
 */
function addKey(obj_source, obj_target) {
	for (var key in obj_target) {
		obj_source[key] = obj_target[key];
	}
}

// 解析json
function JsonParse(target) {
	try {
		target = JSON.parse(target)
	} catch (error) {}
	return target;
}

function redirectToNav(has_aid) {
	var url = has_aid ? './../fillnav.html' : './../../index.html';
	$(".mui-action-home").click(function() {
		mui.confirm('是否确认退出', '', ['取消','确认'], function(e) {
			if(e.index == 0){
			}else{
				mui.openWindow({
					url: url
				});
			}
		})
	});
	if (!has_aid) {
		$("#btnSave").html("保存并下一步");
	}
}

// 单选框点击取消选中
function radioClickCancel() {
	$('[click-cancel]').find('input:radio').click(function(){
		var domName = $(this).attr('name');
		var $radio = $(this);
		// if this was previously checked
		if ($radio.data('waschecked') == true){
			$radio.prop('checked', false);
			$("input:radio[name='" + domName + "']").data('waschecked',false);
			//$radio.data('waschecked', false);
			if ($radio.data('target')) {
				var toggle_val = $radio.data('toggle');
				var target_val = $radio.data('target');
				var target_el = $('[data-toggle-target='+target_val+']');
				if (toggle_val == 'open') {
					clearFormControl(target_el);
				}
			}
		} else {
			$radio.prop('checked', true);
			$("input:radio[name='" + domName + "']").data('waschecked',false);
			$radio.data('waschecked', true);
		}
	});
}