EasyTool.js(V2.4)

最新推荐文章于 2025-09-24 12:52:56 发布

原创最新推荐文章于 2025-09-24 12:52:56 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EasyTool #JS获取表单信息 #JS验证表单 #正则表达式

Javascript 专栏收录该内容

55 篇文章

订阅专栏

EasyTool是一款用于简化表单数据操作的前端组件，提供数据获取、设置、验证等功能，并支持复杂的验证规则如正则表达式验证及日期类型检查。

//请选择最新的版本下载

/*
组件说明：前台经常会涉及到表单数据的验证(check)，数据收集(get)，清空(clear)，以及展示数据库信息(set),
传统方式把每个表单元素(INPUT)设置一个ID，然后根据ID设置相应的值。缺点就是繁琐，不标准。

EasyTool就是解决这些问题而设计的，组件最基本的方法和功能就是：
	1.EasyTool.getObject	获取表单数据
	2.EasyTool.setObject	设置表单数据
	3.EasyTool.checkObject	验证表单数据
	4.EasyTool.clearObject	清空表单数据
	5.EasyTool.createXmlDOM 将xml字符串转成成XMLDOM对象
	6.EasyTool.getXMLString 将XMLDOM对象转换成xml文本形式



*/
//Author：愤怒的coder
//<script src="EasyTool.js" charset="UTF-8"> </script> 
/*标记名称：采用flagName(默认为property)=属性方式 是否验证和验证规则：check，提示信息：errorMsg
	验证规则：
		.notNull:非空
		.Integer	数值类型
		.Date		日期类型
		.maxLen=数值 ：最大长度不能大于多少
		.minLen=数值 ：最小长度不能小于多少
		.length=数值 ：长度等于多少
		.regExp='正则表达式' ：正则表达式验证【!!正则表达式使用英文单引号括起来!!】
		.equals=DOM对象的ID ：当前的值和指定ID的DOM对象的值相等
		.smallThan=DOM对象的ID ：当前的值比指定ID的DOM对象的值要小。
		.bigThan=DOM对象的ID ：当前的值比指定ID的DOM对象的值要大
		.maxValue=?  最大值
		.minValue=? 最小值	
	
	字典码转译：
		.renderJSON：使用键值对方式声名字典表转译内容(适用于：纯静态无需维护的数据)	
			-格式：renderJSON="Key1:text1,Key2:text2,...."  eg:renderJSON="upload:上传,download:下载"
		.renderFun：使用指定的方法进行转译(适用于：1 需要动态查询才能获取的数据；2 经常需维护的数据)
			-格式：renderFun="方法名"  eg:renderFun="foreignNameRender"
			-说明：EasyTool组件值给renderFun指定的方法传递一个参数，即value
	示例:
	<input type='text' add='userName' check="notNull,Integer,maxLen=100,length=11,regExp='[A-Z]{3,6}',maxValue=100,minValue=16,equals='id0',smallThan='id1',bigThan='id2' " 
	msg="请输入数字类型的用户名称" title="请输入用户名称">
*/

#更新列表

 /*2011更新 V1.0*/

/*
   20120926更新 V2.0
   更新内容：1梳理和优化。2添加正则表达式验证条件。3扩充getObject方法。
*/

/*
   20120927更新 V2.1
   更新内容：1添加日期类型(Date)验证，最值比较。2扩充getObject方法。3添加toDate方法。
*/

/*
   20120927更新 V2.2
   更新内容：1完善日期类型(Date)验证。2添加EasyTool.setGrayStyle方法。
*/

/*
   20121005更新 V2.3
   更新内容：
  1添加renderJSON(使用JSON标记字典码翻译) 
  2添加renderFun(使用指定方法翻译字典码)  
  3添加JSONtoXML方法 
  4添加getXMLObject方法。
  5完善setObject方法(数据源支持XML数据体)。
  6添加调试信息。7完善错误信息的样式。
*/

/*20121011更新至V2.4
 更新内容：
 1.完善demo
 2.整理js文件内容。

*/

#示例页面(js部分)：

function initData(){
		var _data = EasyTool.createXmlDOM(EasyTool.getValue("sel_xml"),true).getElementsByTagName("TaskinstanceInfo")[0];
		JSLogger.log(_data);
	}
	//测试数据
	var data = null;
	
	//测试方法
	function setIt(){
		if(data==null){//XML数据体
			data = EasyTool.createXmlDOM(EasyTool.getValue("sel_xml"),true).getElementsByTagName("TaskinstanceInfo")[0];
		}
		//JSLogger.log(data);

		EasyTool.setObject("addUser",data,"addnew-member-dlg");
		JSLogger.logColor("set表单数据over","blue");

	}
	function add(){
		data=EasyTool.getObject('addUser','addnew-member-dlg',null);
		JSLogger.logColor("收集并打印表单数据(JSON对象)");
		JSLogger.log(data);

	}
	function errorHander(errorMsg){
		JSLogger.logHTML(errorMsg,"red");
	}
	
	//英文名称的特殊处理函数(render)
	function foreignNameRender(v){
		return v+"_ 示例处理文本";/*或者使用if..else...*/
	}
	
	function testJSON(){
		var type = document.getElementById("chk_type").checked?"node":"attribute";
		JSLogger.logColor(type=="node"?"节点结构":"属性结构");
		var xml = EasyTool.getXMLString('addUser',"services.data.user",type,'addnew-member-dlg',null);
		JSLogger.logHTML(xml);
	}

愤怒的coder - 越分享越精彩。