纯javascript+xml配置验证

前两天无事写了个xml+javascript结合页面表单的实例,实际用起来不怎么方便,今天对它进行了改进,不管是从界面显示还是从代码较前好些.但是js加载xml时出现中文乱码,希望高手能提供好的解决办法.目前我只能用英文代替提示信息.

和前面一样xml中的id和表单的id要一样才行.

js代码:

var submitflag=false;
var xmlDoc=null;
function   getxmlDoc()   
  {   
      	  xmlDoc=new   ActiveXObject("Microsoft.XMLDOM");   
          xmlDoc.async=false;   
          xmlDoc.load("../web/js/validator.xml");   
          if(xmlDoc.parseError.errorCode!=0)   
          {   
                  var   myErr=xmlDoc.parseError;   
                  alert("出错！"+myErr.reason);   
          }           
  }

/**
	创建一个Div消息提示框
*/
function createDivMessage(e,strHtml){
	var div=document.getElementById("divMsg");
	if(div!=null){
		document.body.removeChild(div);
	}
	var object=e;
	var div=document.createElement('div');
	 	div.id="divMsg";
		div.style.position = "absolute";
		var ttop=object.offsetTop+object.offsetHeight;
		var tleft=object.offsetLeft+object.offsetWidth;
		while(object=object.offsetParent){ttop+=object.offsetTop;tleft+=object.offsetLeft;}
		div.style.top=ttop;
		div.style.left=tleft;
		div.style.width= 250;
		div.style.height=64;
		div.style.background="url(../web/images/userimages/message.PNG)";
		div.innerHTML=strHtml;
		document.body.appendChild(div);
}
window.οnlοad=roadXml;

/**
	加载脚本验证配置的Xml文件
*/
function roadXml(){
		getxmlDoc();
		var nodeList=xmlDoc.selectSingleNode("form").childNodes;
		var str="";
			for(var i=0;i<nodeList.length;i++){
				var id=nodeList[i].getAttribute('id');
				var startLength=nodeList[i].getAttribute('startLength');
				var lastLength=nodeList[i].getAttribute('lastLength');
				var expression=nodeList[i].getAttribute('expression');
				var errorNull=nodeList[i].getAttribute('errorNull');
				var errorFormat=nodeList[i].getAttribute('errorFormat');
				var errorLength=nodeList[i].getAttribute('errorLength');
				var trueMessage=nodeList[i].getAttribute('trueMessage');
				validatorMethod(id,startLength,lastLength,expression,errorNull,errorFormat,errorLength,trueMessage);
			}
			
}
window.setInterval("removeTag()",5000);

function removeTag(){
	var div=document.getElementById("divMsg");
	if(div!=null){
		document.body.removeChild(div);
	}else{
	
	}
}
/**
	失去焦点触发
*/
function validatorMethod(id,startLength,lastLength,expression,errorNull,errorFormat,errorLength,trueMessage){
		var object=document.getElementById(id);
		object.onblur = function(){
			var lengthFlag=validatorLength(object,startLength,lastLength);
			var formatFlag=validatorFormat(object,expression);
			var message="";
				
				switch(lengthFlag){
					case "0":message+="<font color='red'>"+errorNull;
							break;
					case "1":message+="<font color='red'>"+errorLength;
							break;
					case "2":
								if(formatFlag){
										message+="<font color='green'>"+trueMessage;
										submitflag=true;
								}else{
										message+="<font color='red'>"+errorFormat;
					
								}
							break;
					
				}
				createDivMessage(object,message);
		};
}

/**
	验证长度
*/
function validatorLength(e,startL,lastL){
	var object = e;
	var valueLength=(object.value).length;
	if(valueLength==0){
		return "0";
	}
	if(valueLength>lastL||valueLength<startL){
		return "1";
	}else{
		return "2";
	}
}
/**
	验证格式
*/
function validatorFormat(e,expr){
	var object=e;
	if(expr==""){
		return true;
	}else{
		if(object.value.match(expr)!=null){
		return true;
	}else{
		return false;
	}
	}
}
/**
	提交前检验数据是否合法
*/
function checkFlagSubmit(){
	return submitflag;
}

 

xml代码:

<?xml version="1.0" encoding="UTF-8"?>
<form>
	<element id='userEmail' 
			 startLength='8'
			 lastLength='30'
			 expression='\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*'
			 errorNull='Not is empty!'
			 errorFormat='Email format error!'
			 errorLength='Email the length should be 8~20!'
			 trueMessage='Email format true!'
			 />
	<element id='userName' 
			 startLength='2'
			 lastLength='10'
			 expression=''
			 errorNull='Not is empty!'
			 errorFormat='userName format error!'
			 errorLength='userName the length should be 2~10!'
			 trueMessage='userName format true!'
			 />
	<element id='userMobile' 
			 startLength='10'
			 lastLength='12'
			 expression='^(13|15)[0-9]{9}$'
			 errorNull='Not is empty!'
			 errorFormat='userMobile format error!'
			 errorLength='userMobile the length should be 10~12!'
			 trueMessage='userMobile format true!'
			 />
	<element id='userPassword' 
			 startLength='6'
			 lastLength='12'
			 expression=''
			 errorNull='Not is empty!'
			 errorFormat='userPassword format error!'
			 errorLength='userPassword the length should be 6~12!'
			 trueMessage='userPassword format true!'
			 />
	<element id='userBorn' 
			 startLength='6'
			 lastLength='12'
			 expression='^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$'
			 errorNull='Not is empty!'
			 errorFormat='userBorn format error!'
			 errorLength='userBorn the length should be 6~12!'
			 trueMessage='userBorn format true!'
			 />
	<element id='hometel' 
			 startLength='10'
			 lastLength='13'
			 expression='(^(\d{2,4}[-_－—]?)?\d{3,8}([-_－—]?\d{3,8})?([-_－—]?\d{1,7})?$)|(^0?1[35]\d{9}$)'
			 errorNull='Not is empty!'
			 errorFormat='HomeTelphone format error!'
			 errorLength='HomeTelphone the length should be 10~13!'
			 trueMessage='HomteTelpone format true!'
			 />
	<element id='officetel' 
			 startLength='10'
			 lastLength='13'
			 expression='(^(\d{2,4}[-_－—]?)?\d{3,8}([-_－—]?\d{3,8})?([-_－—]?\d{1,7})?$)|(^0?1[35]\d{9}$)'
			 errorNull='Not is empty!'
			 errorFormat='OfficeTelphone format error!'
			 errorLength='OfficeTelphone the length should be 10~13!'
			 trueMessage='OfficeTelpone format true!'
			 />
	<element id='userQQ' 
			 startLength='4'
			 lastLength='11'
			 expression='[1-9][0-9]{4,}'
			 errorNull='Not is empty!'
			 errorFormat='QQ format error!'
			 errorLength='QQ the length should be 4~11!'
			 trueMessage='QQ format true!'
			 />
</form>

 

html表单:

 

<table border="0" style="width:80%;">
        		<tr style="padding-top:1px;">
        			<td align="right">电子邮箱:</td>
        			<td align="left"><input type="text" id="userEmail" name="users.userEmail"/></td>
        			<td colspan="2" style="width:200px" align="left"></td>
        		
        		</tr>
        		<tr style="padding-top:1px;">
        			<td align="right">真实姓名:</td>
        			<td align="left"><input type="text" id="userName" name="users.userName"/></td>
        			<td colspan="2" style="width:200px" align="left"></td>
        		
        		</tr>
        		<tr style="padding-top:1px;">
        			<td align="right">用户手机:</td>
        			<td align="left"><input type="text" id="userMobile" name="users.userMobile"/></td>
        			<td colspan="2" style="width:200px" align="left"></td>
        
        		</tr>