`
dingjun1
  • 浏览: 214387 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

表单验证框架

框架prototypeJSPHTML 
阅读更多 

<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">是 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT 
      id=wtqk_CCnqk type=radio value=否 name=wtqk.CCnqk>否 <INPUT id=wtqk_C 
      type=checkbox value=是 name=wtqk.checkbox valid="checkbox不能为空" js="check">是 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>
分享到：
| 总结:CSS在IE与Firefox下的兼容性
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    强大的表单验证框架

    "强大的表单验证框架"标题所指的，很可能是用于简化这一过程的高效工具，旨在帮助开发者更方便、更有效地进行表单数据验证。 表单验证框架通常包含以下核心功能： 1. **规则定义**：提供丰富的验证规则，如非空、...

    formvalidator 表单验证框架

    formvalidator 是一个强大的前端表单验证框架，专为开发者提供高效、灵活的表单数据验证解决方案。这个框架允许开发者在用户提交表单前检查输入的数据，确保数据的完整性和准确性，从而提高用户体验并减少服务器端的...

    java表单验证框架

    Java表单验证框架是开发Web应用时不可或缺的一部分，它能够帮助开发者轻松地对用户输入的数据进行有效性检查，确保数据的准确性和安全性。本框架以简洁、高效为特点，通过在表单字段上添加正则表达式标签，即可实现...

    jquery表单验证框架：jquery.validate.zip

    《jQuery表单验证框架——深入理解jQuery.validate》 在网页开发中，表单验证是必不可少的一环，它能确保用户输入的数据符合预期，减少服务器端的处理负担，提高用户体验。jQuery是一个广泛使用的JavaScript库，而...

    详细讲解—表单验证框架的实现

    在Web开发中，表单验证框架的实现是至关重要的，它确保了用户输入的数据符合预设的规则，防止无效或恶意的数据进入系统。本部分将深入讲解如何在B/S架构的应用程序中实施一个简单的表单验证框架，以登录表单为例。 ...

    JSP客户端表单验证框架JSValidation

    **JSP客户端表单验证框架JSValidation** JSValidation是一款基于JavaScript的轻量级表单验证框架，主要用于在JSP（JavaServer Pages）应用中实现客户端的表单数据验证。它提供了一种简单、高效的手段来确保用户在...

    自定义表单验证框架

    标题中的“自定义表单验证框架”指的是一个用于在Web应用程序中验证用户输入的自定义工具。这样的框架允许开发者根据业务需求制定特定的验证规则，提高应用的安全性和用户体验。表单验证是确保用户提交的数据符合...

    JS客户端表单验证框架

    传统的验证方式往往需要编写大量的JavaScript代码，而这套框架通过提供配置文件和特定的标签使用，使得表单验证变得更加简单易行。 在使用**JS客户端表单验证框架**时，开发者不再需要手动编写复杂的JavaScript函数...

    sui表单验证框架

    sui表单验证框架是一款强大的JavaScript开发工具，专用于实现高效、灵活的表单验证功能。在Web应用中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，从而提高数据质量和用户体验。sui框架凭借...

    jsvalidation 强大而灵活的表单客户端验证框架

    简便的XML配置，易于扩充的验证方式（目前支持13种验证，囊括了大部分常用表单验证），使得JSValidation成为验证框架的首选。 1. JSValidation是什么？ 如首页所说，JSValidation是客户端表单验证框架，用在...

    表单验证框架验证

    表单验证框架验证是提高这一过程效率和用户体验的有效手段。本文将详细探讨三种常见的表单验证方法：JavaScript验证、框架验证以及正则表达式验证。 首先，我们来了解**JavaScript验证**。JavaScript是一种客户端...

    Ajax表单验证框架

    在网站开发中，Ajax（Asynchronous JavaScript and XML）表单验证框架是提高用户体验的重要工具。它允许我们在不刷新整个页面的情况下进行数据验证，为用户提供实时反馈，极大地提升了交互性。本教程将深入探讨Ajax...

    最简单的表单验证框架发布

    标签“Java”可能表明这个框架与Java有关，尽管表单验证通常在前端JavaScript中进行，但有可能这个框架与后端Java服务器端验证有集成，或者由Java开发者创建并发布。 现在，让我们逐一分析压缩包中的文件： 1. `...

    简单且强大的js表单验证框架

    **标题解析：** "简单且强大的js表单验证框架" 这个标题表明我们要讨论的是一种JavaScript（js）实现的轻量级表单验证工具。它强调了易用性和功能的强大性，暗示这个框架可能提供了丰富的验证规则和灵活的自定义选项...

    Struts2极速表单验证框架(注解)

    本篇将详细介绍Struts2的极速表单验证框架，特别是其注解方式的使用。 ### 1. 表单验证的重要性 在Web应用程序中，验证用户输入的数据是必不可少的，因为不正确的数据可能导致业务逻辑错误，甚至安全漏洞。Struts2...

    基于hibernate_validator的异步表单校验框架依赖文件

    在基于Hibernate Validator的异步表单校验框架中，通常会结合Ajax技术，当用户填写表单时，后台会实时地、异步地对输入的数据进行验证，并将结果返回给前端，使得用户可以及时得到反馈。 **三、使用步骤** 1. **...

Magicbox
Global site tag (gtag.js) - Google Analytics