maskedit.htc

HTC,demo WEB用于。 超大型

	///////////////////////////////////////////////////////
	// 标题：MaskEdit组件//////////////////////////////
	// 时间：2003-12-30//////////////////////////
	////////////////////////////////////////////////////
	<public:component name="MaskEdit" urn="MaskEdit">
	// HTC定义
	<public:property name="dataType" put="putDataType"/>//类别
	<public:property name="maxLength"/>//文本最大长度
	<public:property name="customReg"/>//定制正则表达式

	<public:property name="value" put="putValue" get="getValue"/>//当前值
	<public:property name="text" put="putText" get="getText"/>//当前文本
	<public:property name="caption" put="putCaption"/>//标签

	<public:property name="width" value="50"/>//MaskEdit宽
  <public:property name="height" value="18"/>//MaskEdit高
	<public:property name="left" value="0"/>//MaskEdit左边距
	<public:property name="top" value="0"/>//MaskEdit上边距	
	<public:property name="refresh" put="refresh"/>//行为属性
	
	<public:property name="readOnly" put="putReadOnly" get="getReadOnly"/>//readOnly属性
	<public:property name="enabled" put="putEnabled" get="getEnabled"/>//是否可响应事件
	
	
	<public:property name="init" put="initialize"/>//行为属性
	
	<public:event name="onFocusLost" id="evtLostFocus"/>//当失去焦点时fire该事件
	<public:method name="verify"/>
	
	<public:method name="getBirthday"/>//返回身份证中的生日
	<public:method name="getSex"/>//返回身份证中的性别

	<script language="JavaScript">
	
	  var ouvSPAN = null;//
	  var oMECase = null;//MaskEdit容器对象
		var oME = null;//MaskEdit对象
		var vWidth,vHeight,vLeft,vTop;//定位缓存变量
		var vReadOnly = false;//默认非只读
		var vEnabled = true;//默认可响应任何事件

		var oText = "";//MaskEdit当前文本
		var oValue = "";//MaskEdit当前值
		var oDataType;//MaskEdit类别
		var oCaption;//标题对象
		var vCaption;//标题
		var vBirthday = "";//省份证中的生日
		var vSex = "";//身份证中的性别

		var dateFlag = false;//日期型数据标志
	  var boolHadVerified = false; //外部强制校验标志

		oMECase = window.document.createElement("<div class='phms_muskedit_case'/>");
		oCaption = window.document.createElement("<span class='phms_muskeditCaption'/>");
		ouvSPAN = window.document.createElement("span");
		//alert(vCaption);
		oCaption = element.appendChild(oCaption);
		oMECase = element.appendChild(oMECase);	
		ouvSPAN = element.appendChild(ouvSPAN);	
				
		oME = window.document.createElement("<input class='phms_muskedit'/>");
		//
		//oME.style.left = vLeft + oCaption.offsetWidth;
		oME = oMECase.appendChild(oME);		
		oME.onkeydown = confirmOMe;
		
		function confirmOMe(){		
		 event.cancelBubble = true; 
		  
		  //event.keyCode = 0;
		}
			

		function refresh(){//用来定义element的样式大小

			vWdith = width;
			vHeight = height;
			vLeft = left;
			vTop = top;				
			
			if(!ouvSPAN){
			  ouvSPAN = window.document.createElement("SPAN");
			  ouvSPAN = element.appendChild(ouvSPAN);				  
			}
			
		  ouvSPAN.style.visibility = "hidden"; 
		  if(typeof(vCaption) != "undefined") ouvSPAN.innerText = vCaption;
		  
		  with(oCaption){//maskEdit定位、样式
			  style.left = vLeft;
				style.top = parseInt(vTop) + 3;
				style.width = ouvSPAN.offsetWidth;
				style.height = ouvSPAN.offsetHeight;
				
				if(typeof(vCaption) != "undefined")
				  innerText = vCaption;
				  if(ouvSPAN.parentElement == element) ouvSPAN = element.removeChild(ouvSPAN);
			}

			with(oMECase){//maskedit容器定位
			
			  if(oCaption.offsetWidth!=0)
				  style.left = parseInt(oCaption.offsetWidth) + parseInt(vLeft); //parseInt(oCaption.style.left) + 12;
				else
				  style.left = vLeft;
				  
				style.top = vTop;
				style.width = vWdith;
				style.height = vHeight;
		  }	

			with(oME){//maskEdit定位、样式						
				style.width = vWdith - 2;
				style.height = vHeight - 2;			
				
				if(typeof(vReadOnly) == "undefined" || vReadOnly.toString().toLowerCase() != "true"){//readonly
				  readOnly = false;
				}else{
				  readOnly = true;
				}
				
				if(typeof(vEnabled) == "undefined" || vEnabled.toString().toLowerCase() != "true"){//disabled
				  disabled = true;
				}else{
				  disabled = false;
				}	  		
			}			
		}	
		
		function refresh2(){//处理因为enabled和readOnly属性的改变引起的maskEdit的改变
		   with(oME){//maskEdit定位、样式						
				style.width = vWdith - 2;
				style.height = vHeight - 2;			
				
				if(typeof(vReadOnly) == "undefined" || vReadOnly.toString().toLowerCase() != "true"){//readonly
				  readOnly = false;
				}else{
				  readOnly = true;
				}
				
				if(typeof(vEnabled) == "undefined" || vEnabled.toString().toLowerCase() != "true"){//disabled
				  disabled = true;
				}else{
				  disabled = false;
				}	  		
			}	
		}

		function initialize(){//初始化			
			oME.onblur = checkAll;
			refresh();//定位	
			element.runtimeStyle.visibility = "visible";
			//
		}
		

		function verify(){//公开方法，对现有的值进行校验
			oME.blur();
		}

		function checkAll(){//根据dataType不同的取值来执行不同的正则
		
			if(boolHadVerified) return;
		  switch(oDataType){
				case "phms_Date"://完整日期、仅年份或仅年月
					checkDate();
					break;
				case "phms_YearMonthDay"://完整日期
					checkYearMonthDay();
					break;
				case "phms_Year"://年份
					checkYear();
					break;
				case "phms_YearMonth"://年月
					checkYearMonth();
					break;
				case "phms_Number"://数字
					checkNumber();
					break;
				case "phms_Blank"://空值
					checkBlank();
					break;
				case "phms_Common"://普通input
					checkCommon();
				  break;
				case "phms_IdentityCard"://身份证
				  checkIdentityCard();
				  break;
				case "phms_Custom"://接收输入正则表达式
					checkCustom();
				  break;				
				default:
					checkCommon();//默认为普通input
			}

			boolHadVerified = false;			
		}		

		function checkDate(){//日期验证
			oText = oME.value;
			oValue = oME.value;
			if(thanMaxLength(oText)) return;
			var reg = /^([1-2]{1}[0-9]{3}-([1-9]{1}|1[0-2]{1}|0[1-9]{1})-([1-9]{1}|0[1-9]{1}|[12]{1}[0-9]{1}|3[0-1]{1}))*$/;
			var r = oText.match(reg);
			if(r==null){//年月日检查失败
				reg = /^([1-2]{1}[0-9]{3}-([1-9]{1}|1[0-2]{1}|0[1-9]{1}))*$/;
				r = oText.match(reg);
				if(r==null){//年月检查失败
					reg = /^([1-2]{1}[0-9]{3})*$/;
					r = oText.match(reg);
					if(r==null){//年检查失败
						alert("日期输入有错误 [格式要符合:yyyy-mm-dd、yyyy-mm或yyyy]");
						return false;
					}										
				}
			}
			evtLostFocus.fire();//响应onFocusLost事件
		}		

		function checkYearMonthDay(){//年月日验证
		  oText = oME.value;
		  oValue = oME.value;
			if(thanMaxLength(oText)) return;
			var reg = /^([1-2]{1}[0-9]{3}-([1-9]{1}|1[0-2]{1}|0[1-9]{1})-([1-9]{1}|0[1-9]{1}|[12]{1}[0-9]{1}|3[0-1]{1}))*$/;
			var r = oText.match(reg);
			if(r==null){
				alert("日期输入有误 [格式要符合:yyyy-mm-dd]");
				return false;
			}
			evtLostFocus.fire();//响应onFocusLost事件			
		}

		function checkYear(){//年份验证
		  oText = oME.value;
		  oValue = oME.value;
			if(thanMaxLength(oText)) return;
			var reg = /^([1-2]{1}[0-9]{3})*$/;
			var r = oText.match(reg);
			if(r==null){
				alert("年份输入有误 [格式要符合:yyyy(范围:1000-2999)]");
				return false;
			}
			evtLostFocus.fire();//响应onFocusLost事件			
		}

		function checkYearMonth(){//年月验证
		  oText = oME.value;
		  oValue = oME.value;
			if(thanMaxLength(oText)) return;
			var reg = /^([1-2]{1}[0-9]{3}-([1-9]{1}|1[0-2]{1}|0[1-9]{1}))*$/;
			var r = oText.match(reg);
			if(r==null){
				alert("年月输入有误 [格式要符合:yyyy-mm]");
				return false;
			}
			evtLostFocus.fire();//响应onFocusLost事件
		}

		function checkNumber(){//数字验证		  
		  oText = oME.value;
		  oValue = oME.value;
			var tmpStr = oME.value;
			if(thanMaxLength(tmpStr)) return;
			var reg = /^[0-9]*$/;
			var r = tmpStr.match(reg);
			if(r==null){
				alert("输入必须为数字");
				oME.select();
				boolHadVerified = true;
				oText = null;
				return;
			}
			evtLostFocus.fire();//响应onFocusLost事件
			oME.value = tmpStr;
			oText = tmpStr;
		}

		function checkBlank(){//空值验证
		  oText = oME.value;
		  oValue = oME.value;
			if(thanMaxLength(oText)) return;
			if(oME.value == ""){
				alert("输入不能为空");
				return false;
			}
			evtLostFocus.fire();//响应onFocusLost事件
		}

		function checkCommon(){//普通input
		  oText = oME.value;
		  oValue = oME.value;
			if(thanMaxLength(oText)) return;
			evtLostFocus.fire();//响应onFocusLost事件
		}
		
		function checkIdentityCard(){//身份证验证

		  oText = oME.value;
		  oValue = oME.value;
		  if(thanMaxLength(oText)) return;
		  if(parseInt(oText.length)!= 15 && parseInt(oText.length)!= 18 && oME.value!=""){//身份证位数不正确
		    alert("输入的身份证号码位数不对");
		    oME.focus();
		    return;
		  }		    

		  
		 if(checkBirthdayFromidentity()==-1) return;//验证身份证中的生日
		 ////////////////////////////

	    var reg = /^[0-9]{17}[0-9a-zA-Z]{1}$/;
			var r = oText.match(reg);
			
			var reg1 = /^[0-9]{15}$/;
			var r1 = oText.match(reg1);
			
			if(r==null && r1==null){
				return;
			}		
			
			evtLostFocus.fire();//响应onFocusLost事件  
		}
		
		function checkBirthdayFromidentity(){//获取身份证中的生日并进行合法性验证
		                                     //该方法由于是在checkIdentityCard()中被调用,固不再进行位数的验证 
	  
		  var tmpStr = "";
		  var reg;
		  
		  ///////////取出生日/////////////>>>>>>>>>>>>>
		  if(parseInt(oText.length) == 15){//15位
		    tmpStr = oText.substr(6,6);
		    vBirthday = "19" + tmpStr.substr(0,2) + "-" + tmpStr.substr(2,2) + "-" + tmpStr.substr(4,2);		    
		  }else{//18位
		    tmpStr = oText.substr(6,8);
		    vBirthday = tmpStr.substr(0,4) + "-" + tmpStr.substr(4,2) + "-" + tmpStr.substr(6,2);
		  }		  
		  ////////////////<<<<<<<<<<<<<<<<<<////////
		  //////////取出性别////////////////
		  //////////此处代码将身份证中的性别标志取出并赋给vSex////////////////
		  //////////////////////////////////////////////////////////
		  
		  var regBirthday = /^([1-2]{1}[0-9]{3}-([1-9]{1}|1[0-2]{1}|0[1-9]{1})-([1-9]{1}|0[1-9]{1}|[12]{1}[0-9]{1}|3[0-1]{1}))*$/;
			var rBirthday = vBirthday.match(regBirthday);
			if(rBirthday==null && oME.value!=""){
				alert("身份证中的生日输入错误");
				oME.focus();
				return -1;
			}else{//验证通过则返回身份证中的生日
			  return vBirthday;
			}			
		}
		
		function checkCustom(){//接收输入正则表达式
			oText = oME.value;
			oValue = oME.value;
			if(thanMaxLength(oText)) return;

			if(customReg!=null){
				var r = oText.match(customReg);
				if(r==null){
					alert("输入的内容不符合要求");
					oME.focus();
					return false;
				}
				evtLostFocus.fire();//响应onFocusLost事件
			}else{
			  alert("请设置customReg属性值");
				return false;
			}
		}
		
		function getBirthday(){//返回身份证中的生日
		  if(oDataType == "phms_IdentityCard")
		    return checkBirthdayFromidentity();		
		  else
		    return "";  		  
		}
		
		function getSex(){//返回身份证中的性别
		  return vSex;
		}

		function thanMaxLength(str){//最大长度判断
			if (maxLength !== null){
				if(str.length > parseInt(maxLength)){ 
					alert("内容超出了最大长度限制");
					return false;
				}
			}
		}

		function putDataType(arg){
		  this.oDataType = arg;
		}
		
		function putCaption(arg){
		  this.vCaption = arg;
		}
		
		function getValue(){		  
			return oME.value;
		}

		function getText(){
		//debugger;
		  return oME.value;
		}

		function putText(arg){

		  this.oText = arg;
		  this.oValue = arg;

			if(oME)
				oME.value = oText;
				
				
		}
		
		function putValue(arg){
		  this.oValue = arg;
		  this.oText = arg;
		  if(oME)
				oME.value = oText;
		}
		
		function putReadOnly(arg){		  
		  this.vReadOnly = arg;
		  try{
		    refresh2();
		  }catch(e){}
		  //
		  if(oMECase){
		    if(arg.toString() == "true"){
		      oMECase.style.borderColor = "#cccccc";  
		    }else{
		      oMECase.style.borderColor = "#7B9EBD";		    
		    }
		  }	  
		  
		}
		
		function getReadOnly(){
		  return this.vReadOnly;
		}
		
		function putEnabled(arg){
		  this.vEnabled = arg;
		  try{
		    refresh2();
		  }catch(e){}
		}
		
		function getEnabled(){
		  return this.vEnabled;
		}
		
	</script>
	</public:component>