表单验证框架

于 2009-08-07 14:56:24 发布
阅读量122 收藏
点赞数
分类专栏： AJAX-JS 文章标签： 框架 prototype JSP HTML 


<script type="text/javascript">
/**
使用说明
标签中自定义三个属性：
|----------------------------------|
|---  属性名称   --------  是否必须 ---|
|+--    js     --------  true  ----|
|+--   valid   --------  true  ----|
|+-- maxlength -------- false  ----|
|----------------------------------|

js属性：表示验证类型
js的值：
notEmpty: 非空
maxlen:   可以为空，如果有值最大长度不能超过“maxlength”属性的值
notEmptyLen:非空且最大长度不能超过“maxlength”属性的值
date:日期类型，非空格式必须为yyyy-MM-dd，
emptyOrDate:可为空的日期类型,格式必须为yyyy-MM-dd
int:整数
float:浮点型数字
check:radio,checkbox类型必须选择


valid属性：表示出错时的提示信息

maxlength属性：最在长度，当js值为maxlen或notEmptyLen时必须有该属性

*/
	function validForm(formDom){
		try{
			var typeV;
			var elems = formDom.elements;
			var elem;
			var js;//验证要求
			var tagN;//标签名
			var valid;//验证的值
			var val_err_str="";
			var tool = new validTool();
			for(var i=0;i<elems.length;i++){
				elem = elems[i];
				typeV = elem.type;
				tagN = elem.tagName;
				js = elem.getAttribute("js");
				valid = elem.getAttribute("valid");
				if(typeof(js)=="undefined" || js==null){//不需要验证
					continue;
				}
				if(tagN != "INPUT" && tagN != "TEXTAREA" && tagN !=  "SELECT"){//只检验这三类的输入框
					continue;
				}

				if(!tool.valid(elem,js)){
					val_err_str += "<li>"+valid+"</li>";
				}
			}

		}catch(e){
			alert(e.description);
		}

		try{
			if(val_err_str.length>0){
				tool.t_showErr(val_err_str);//显示提示信息
				return false;
			}
		}catch(e){
			alert(e.description);
		}
		return true;
	}

function validTool(){	
	this.notEmpty = function(v){

		v = this.trim(v);
		if(v==null || v==""){
			return false;
		}
		return true;
	}

	this.checkSel = function(obj){
		var fields = document.getElementsByName(obj.name);
		var i=0;
		for(;i<fields.length;i++){
			if(fields[i].checked){
				return true;
			}
		}
		return false;
	}

	this.checkLen = function(v,len){

		if(v.length>len){
			return false;
		}
		return true;
	}

	this.trim = function(v){
		return v.replace(/(^\s*)|(\s*$)/g, "");
	}

	this.isInt = function(v){

		var arr = v.match(/^-?\d+$/);
    	return arr != null;
	}

	this.isFloat = function(v){

		var arr = v.match(/^\d+(\.\d+)?$/);
    	return arr != null;
	}

	this.isDate = function(v){

		var arr;
	    var re = /^(\d{4})-(\d{2})-(\d{2})$/;
	    if (arr = re.exec(v)) {
	    	//alert(parseInt(arr[2],10)+" "+ parseInt(arr[3],10));
	        if (parseInt(arr[2],10) > 12) {
	            return false;
	        }
	        if (parseInt(arr[3],10) > 31) {
	            return false;
	        }
	        return true;
	    } else {
	        return false;
	    }
	}

	this.valid = function(elem,fun){
		if(fun=="notEmpty"){
			return this.notEmpty(elem.value);
		}else if(fun=="maxLen"){
			var len = elem.getAttribute("maxlength");
			return this.checkLen(elem.value,len);
		}else if(fun=="notEmptyLen"){
			var len = elem.getAttribute("maxlength");
			return (this.notEmpty(elem.value) && this.checkLen(elem.value,len));
		}else if(fun=="check"){
			return this.checkSel(elem);
		}else if(fun=="int"){
			return this.isInt(elem.value);
		}else if(fun=="date"){
			return this.isDate(elem.value);
		}else if(fun=="float"){
			return this.isFloat(elem.value);
		}else if(fun=="emptyOrDate"){
			return !this.notEmpty(elem.value) || this.isDate(elem.value);
		}else{
			return true;
		}
	} 

}

validTool.prototype.t_showErr=function(t_errmess){
	var sl = document.body.scrollLeft;
	var sh = document.body.scrollTop;
	var ow = document.body.offsetWidth;
	var oh = document.body.offsetHeight;
	try{
		//alert("sl:"+sl+",sh:"+sh+",ow:"+ow+",oh:"+oh);
		var errDiv=document.getElementById("lay_err123");
		if(errDiv==null || typeof(errDiv)=="undefined"){
			errDiv = document.createElement("div");
			errDiv.id="lay_err123";
			if(ow>350){
				errDiv.style.width="300px";
				errDiv.style.left= (sl+ow/2-100)+"px";
			}else{
				errDiv.style.width="80%";
				errDiv.style.left="8%";
			}
			errDiv.style.position = "absolute";
			errDiv.style.top=(sh+oh/4)+"px";
			errDiv.style.backgroundColor="#99ccff";
			errDiv.style.border="2px solid #3399ff";
			errDiv.style.zIndex=200;
			errDiv.style.textAlign="left";
			document.body.appendChild(errDiv);
		}

		var lay1 = document.getElementById("lay1_error");
		if(lay1==null || typeof(lay1)=="undefined"){
			lay1 = document.createElement("iframe");
			lay1.id="lay1_error";
			lay1.style.width = ow+"px";
			lay1.style.height = oh+"px";
			lay1.style.position = "absolute";
			lay1.style.left = sl+"px";
			lay1.style.top = sh+"px";
			lay1.style.backgroundColor="#99ccff";
			lay1.style.zIndex=1;
			lay1.style.filter = "alpha(opacity=50)";

			document.body.appendChild(lay1);
		}


		var str="<div style=\"float:right;clear:both;cursor:hand;color:red;width:60px;\" "
				+"onclick=\"document.getElementById('lay_err123').style.display='none';document.getElementById('lay1_error').style.display='none';\">[关闭]</div><br>";
		errDiv.innerHTML=str+t_errmess;
		errDiv.style.display="";
		lay1.style.display="";

	}catch(e){
		//alert(e.description);
	}
}
</script>





======================================
demo

a.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0042)http://localhost:8080/beanwraper/MyJsp.jsp -->
<HTML><HEAD><TITLE>valid form demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT type=text/javascript>
/**
使用说明
标签中自定义三个属性：
|----------------------------------|
|---  属性名称   --------  是否必须 ---|
|+--    js     --------  true  ----|
|+--   valid   --------  true  ----|
|+-- maxlength -------- false  ----|
|----------------------------------|

js属性：表示验证类型
js的值：
notEmpty: 非空
maxlen:   可以为空，如果有值最大长度不能超过“maxlength”属性的值
notEmptyLen:非空且最大长度不能超过“maxlength”属性的值
date:日期类型，非空格式必须为yyyy-MM-dd，
emptyOrDate:可为空的日期类型,格式必须为yyyy-MM-dd
int:整数
float:浮点型数字
check:radio,checkbox类型必须选择


valid属性：表示出错时的提示信息

maxlength属性：最在长度，当js值为maxlen或notEmptyLen时必须有该属性

*/
	function validForm(formDom){
		try{
			var typeV;
			var elems = formDom.elements;
			var elem;
			var js;//验证要求
			var tagN;//标签名
			var valid;//验证的值
			var val_err_str="";
			var tool = new validTool();
			for(var i=0;i<elems.length;i++){
				elem = elems[i];
				typeV = elem.type;
				tagN = elem.tagName;
				js = elem.getAttribute("js");
				valid = elem.getAttribute("valid");
				if(typeof(js)=="undefined" || js==null){//不需要验证
					continue;
				}
				if(tagN != "INPUT" && tagN != "TEXTAREA" && tagN !=  "SELECT"){//只检验这三类的输入框
					continue;
				}

				if(!tool.valid(elem,js)){
					val_err_str += "<li>"+valid+"</li>";
				}
			}

		}catch(e){
			alert(e.description);
		}

		try{
			if(val_err_str.length>0){
				tool.t_showErr(val_err_str);//显示提示信息
				return false;
			}
		}catch(e){
			alert(e.description);
		}
		return true;
	}

function validTool(){	
	this.notEmpty = function(v){

		v = this.trim(v);
		if(v==null || v==""){
			return false;
		}
		return true;
	}

	this.checkSel = function(obj){
		var fields = document.getElementsByName(obj.name);
		var i=0;
		for(;i<fields.length;i++){
			if(fields[i].checked){
				return true;
			}
		}
		return false;
	}

	this.checkLen = function(v,len){

		if(v.length>len){
			return false;
		}
		return true;
	}

	this.trim = function(v){
		return v.replace(/(^\s*)|(\s*$)/g, "");
	}

	this.isInt = function(v){

		var arr = v.match(/^-?\d+$/);
    	return arr != null;
	}

	this.isFloat = function(v){

		var arr = v.match(/^\d+(\.\d+)?$/);
    	return arr != null;
	}

	this.isDate = function(v){

		var arr;
	    var re = /^(\d{4})-(\d{2})-(\d{2})$/;
	    if (arr = re.exec(v)) {
	    	//alert(parseInt(arr[2],10)+" "+ parseInt(arr[3],10));
	        if (parseInt(arr[2],10) > 12) {
	            return false;
	        }
	        if (parseInt(arr[3],10) > 31) {
	            return false;
	        }
	        return true;
	    } else {
	        return false;
	    }
	}

	this.valid = function(elem,fun){
		if(fun=="notEmpty"){
			return this.notEmpty(elem.value);
		}else if(fun=="maxLen"){
			var len = elem.getAttribute("maxlength");
			return this.checkLen(elem.value,len);
		}else if(fun=="notEmptyLen"){
			var len = elem.getAttribute("maxlength");
			return (this.notEmpty(elem.value) && this.checkLen(elem.value,len));
		}else if(fun=="check"){
			return this.checkSel(elem);
		}else if(fun=="int"){
			return this.isInt(elem.value);
		}else if(fun=="date"){
			return this.isDate(elem.value);
		}else if(fun=="float"){
			return this.isFloat(elem.value);
		}else if(fun=="emptyOrDate"){
			return !this.notEmpty(elem.value) || this.isDate(elem.value);
		}else{
			return true;
		}
	} 

}

validTool.prototype.t_showErr=function(t_errmess){
	var sl = document.body.scrollLeft;
	var sh = document.body.scrollTop;
	var ow = document.body.offsetWidth;
	var oh = document.body.offsetHeight;
	try{
		//alert("sl:"+sl+",sh:"+sh+",ow:"+ow+",oh:"+oh);
		var errDiv=document.getElementById("lay_err123");
		if(errDiv==null || typeof(errDiv)=="undefined"){
			errDiv = document.createElement("div");
			errDiv.id="lay_err123";
			if(ow>350){
				errDiv.style.width="300px";
				errDiv.style.left= (sl+ow/2-100)+"px";
			}else{
				errDiv.style.width="80%";
				errDiv.style.left="8%";
			}
			errDiv.style.position = "absolute";
			errDiv.style.top=(sh+oh/4)+"px";
			errDiv.style.backgroundColor="#99ccff";
			errDiv.style.border="2px solid #3399ff";
			errDiv.style.zIndex=200;
			errDiv.style.textAlign="left";
			document.body.appendChild(errDiv);
		}

		var lay1 = document.getElementById("lay1_error");
		if(lay1==null || typeof(lay1)=="undefined"){
			lay1 = document.createElement("iframe");
			lay1.id="lay1_error";
			lay1.style.width = ow+"px";
			lay1.style.height = oh+"px";
			lay1.style.position = "absolute";
			lay1.style.left = sl+"px";
			lay1.style.top = sh+"px";
			lay1.style.backgroundColor="#99ccff";
			lay1.style.zIndex=1;
			lay1.style.filter = "alpha(opacity=50)";

			document.body.appendChild(lay1);
		}


		var str="<div style=\"float:right;clear:both;cursor:hand;color:red;width:60px;\" "
				+"onclick=\"document.getElementById('lay_err123').style.display='none';document.getElementById('lay1_error').style.display='none';\">[关闭]</div><br>";
		errDiv.innerHTML=str+t_errmess;
		errDiv.style.display="";
		lay1.style.display="";

	}catch(e){
		//alert(e.description);
	}
}
</SCRIPT>

<META content="MSHTML 6.00.2900.3395" name=GENERATOR></HEAD>
<BODY>
<FORM name=wtqk onsubmit="return validForm(this);" action="" method=post>
<TABLE class=xg_table_3 cellSpacing=0 cellPadding=0 width="98%" border=0>
  <TBODY>
  <TR>
    <TD align=right width="10%">问题描述：</TD>
    <TD width="90%" colSpan=5><TEXTAREA id=wtqk_CWtms name=wtqk.CWtms rows=10 cols=100 maxlength="100" valid="问题描述不能为空最大长度为100" js="notEmptyLen"></TEXTAREA> 
    </TD></TR>
  <TR>
    <TD align=right width="10%">解决情况：</TD>
    <TD colSpan=5><TEXTAREA id=wtqk_CJjqk name=wtqk.CJjqk rows=10 cols=100 maxlength="100" valid="问题描述最大长度为100" js="maxLen"></TEXTAREA> 
    </TD></TR>
  <TR>
    <TD align=right width="10%">整数</TD>
    <TD colSpan=5><INPUT name="" valid="整数" js="int"> </TD></TR>
  <TR>
    <TD align=right width="10%">浮点数数</TD>
    <TD colSpan=5><INPUT name="" valid="浮点数" js="float"> </TD></TR>
  <TR>
    <TD align=right width="10%">提交时间：</TD>
    <TD width="23%"><INPUT id=wtqk_DTjsj style="WIDTH: 127px" name=wtqk.DTjsj 
      valid="日期类型" js="date"> </TD>
  <TR>
    <TD align=middle colSpan=2></TD>
    <TD colSpan=4><INPUT id=wtqk_CCnqk type=radio value=是 name=wtqk.CCnqk 
      valid="radio不能为空" js="check">是        <INPUT 
      id=wtqk_CCnqk type=radio value=否 name=wtqk.CCnqk>否 <INPUT id=wtqk_C 
      type=checkbox value=是 name=wtqk.checkbox valid="checkbox不能为空" js="check">是 
             <INPUT id=wtqk_C type=checkbox 
      value=否 name=wtqk.checkbox>否 </TD></TR></TBODY></TABLE>
<DIV class=ntextcenter><INPUT class=xg_wl_btn4 id=Submit type=submit value="确 定" name=Submit> 
</DIV></FORM></BODY></HTML>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值