DHTML form validation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<title>DHTML form validation</title> 
<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)"> 
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML,CSS, Menu, Menus,Drag and drop, Drag, Drop, Cross-browser, Cross browser, Examples, Javascript, Free, Javascripts, Cascading Style Sheet, Crossbrowser,Alf Magne Kalleland, Batalf, minesweeper"> 
<meta name="robots" content="follow"> 
<meta name="googlebot" content="index, follow"> 
<head> 
<style type="text/css">

body{ 
  font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;  /* Font to use */ 
  background-color:#FFF; 
  font-size:0.9em;

} 
   
/* Style for invalid input */ 
.invalidInput{ 
  border:1px solid #F00; 
  padding:1px; 
}

/* Style for valid input */ 
.validInput{ 
  border:1px solid #FFF; 
  padding:1px;

} 
</style> 
<script type="text/javascript"> 
/************************************************************************************************************ 
(C) www.dhtmlgoodies.com, February 2006

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use: 
You are free to use this script as long as the copyright message is kept intact. However, you may not 
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com 
Alf Magne Kalleland

************************************************************************************************************/   
   
// Patterns 
var formValidationMasks = new Array(); 
formValidationMasks['email'] = /b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}b/gi;  // Email 
formValidationMasks['numeric'] = /^[0-9]+$/gi;  // Numeric 
formValidationMasks['zip'] = /^[0-9]{5}-[0-9]{4}$/gi;  // Numeric

var formElementArray = new Array();

function validateInput(e,inputObj) 
{ 
  if(!inputObj)inputObj = this;     
  var inputValidates = true; 
   
  if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='INPUT' && inputObj.value.length==0)inputValidates = false; 
  if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='SELECT' && inputObj.selectedIndex==0){ 
    inputValidates = false; 
  } 
  if(formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']]))inputValidates = false;

if(formElementArray[inputObj.name]['freemask']){ 
    var tmpMask = formElementArray[inputObj.name]['freemask']; 
    tmpMask = tmpMask.replace(/-/g,'-'); 
    tmpMask = tmpMask.replace(/S/g,'[A-Z]'); 
    tmpMask = tmpMask.replace(/N/g,'[0-9]'); 
    tmpMask = eval("/^" + tmpMask + "$/gi"); 
    if(!inputObj.value.match(tmpMask))inputValidates = false 
  }   
   
  if(formElementArray[inputObj.name]['regexpPattern']){ 
    var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']); 
    if(!inputObj.value.match(tmpMask))inputValidates = false 
  } 
  if(!formElementArray[inputObj.name]['required'] && inputObj.value.length==0 && inputObj.tagName=='INPUT')inputValidates = true; 
   
   
  if(inputValidates){ 
    inputObj.parentNode.className='validInput'; 
  }else{ 
    inputObj.parentNode.className='invalidInput' 
  } 
}

function isFormValid() 
{ 
  var divs = document.getElementsByTagName('DIV'); 
  for(var no=0;no

<div class="pagination"><a title="Page"> <b>1</b>/<b>2</b> </a>   <b>1</b> <a href="/cos/2019/0603/298270_2.shtml">2</a> <a href="/cos/2019/0603/298270_2.shtml">下一页</a> <a href="/cos/2019/0603/298270_2.shtml">尾页</a></div>
			 </div>
			</div>
			   </div>
		<div class="postMore">
				<div class="tab" id="tab">
    <span class="active">相关文章</span>
    <span>大家在看</span>
</div>
<div class="tabdiv">
    <div class="tabpane">
			<ul class="articleBar">
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097329.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/3a/1097329.jpg" src="https://www.easck.com/d/file/ap/a4/3a/1097329.jpg"></div>
<div class="txtInfo"><h3>Node.js使用express写接口的具体代码</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097326.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/58/1097326.jpg" src="https://www.easck.com/d/file/ap/a4/58/1097326.jpg"></div>
<div class="txtInfo"><h3>TensorFlow.js实现AI换脸使用示例详解</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097270.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316070012997.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316070012997.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097269.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/c9/1097269.jpg" src="https://www.easck.com/d/file/ap/a4/c9/1097269.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097266.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316063007966.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316063007966.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097265.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/40/1097265.jpg" src="https://www.easck.com/d/file/ap/a4/40/1097265.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097264.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316063006963.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316063006963.jpg"></div>
<div class="txtInfo"><h3>MutationObserver监视对DOM 树所做更改的功能妙用</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097256.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/c1/1097256.jpg" src="https://www.easck.com/d/file/ap/a4/c1/1097256.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097254.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316060019625.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316060019625.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097253.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316060018616.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316060018616.jpg"></div>
<div class="txtInfo"><h3>MutationObserver监视对DOM 树所做更改的功能妙用</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
			</ul>
		</div>
	  </div>
    <div class="tabpane">
	<ul class="articleBar">
	<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097329.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/3a/1097329.jpg" src="https://www.easck.com/d/file/ap/a4/3a/1097329.jpg"></div>
<div class="txtInfo"><h3>Node.js使用express写接口的具体代码</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097326.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/58/1097326.jpg" src="https://www.easck.com/d/file/ap/a4/58/1097326.jpg"></div>
<div class="txtInfo"><h3>TensorFlow.js实现AI换脸使用示例详解</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097270.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316070012997.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316070012997.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097269.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/c9/1097269.jpg" src="https://www.easck.com/d/file/ap/a4/c9/1097269.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097266.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316063007966.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316063007966.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097265.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/40/1097265.jpg" src="https://www.easck.com/d/file/ap/a4/40/1097265.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097264.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316063006963.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316063006963.jpg"></div>
<div class="txtInfo"><h3>MutationObserver监视对DOM 树所做更改的功能妙用</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097256.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/c1/1097256.jpg" src="https://www.easck.com/d/file/ap/a4/c1/1097256.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097254.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316060019625.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316060019625.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097253.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316060018616.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316060018616.jpg"></div>
<div class="txtInfo"><h3>MutationObserver监视对DOM 树所做更改的功能妙用</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
	</ul>
    </div>
</div>
        <footer>
<p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p>
<div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div>
        </footer> 
		<script type="application/ld+json">
{
	"@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld",
	"@id": "https://wap.easck.com/cos/2019/0603/298270.shtml",
	"title": "DHTML form validation-易采站长站",
	"description": "DHTML form validation /************************************************************************************************************ (C) www.dhtmlgoodies.com, February 2006 This is a script from www.dhtmlgoodies.com. You will find this and a",
	"pubDate": "2019-06-03 T 01:49:20+08:00",
	"upDate": "2019-06-03 T 01:49:20+08:00",
        "data":{
            "WebPage":{
                 "pcUrl":"https://www.easck.com/cos/2019/0603/298270.shtml",
                 "wapUrl":"https://www.easck.com/cos/2019/0603/298270.shtml",
                 "fromSrc":"易采站长站"
             }
        }
}
</script>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
	</body>
</html>