入力ブランクチェック

5129 ワード


<html>
<head>
	<style>
		.d{
			filter:alpha(opacity=50,type=3);
			display:block;
			position:absolute;
			border:1px solid #ffccdd;
			background-color:#fffeee;
			font-weight:bold;
			font-size:16px;
			color:#002222;
			width:400;
			overflow:hidden;
			white-space:nowrap;
			z-Index:200;
			}
	</style>
</head>
<body>
<script>
	var a=new Array();
	var $=function(ele)
			{
				return document.getElementById(ele);
			}
	function Circle(r,eleId)
	{
		this.index=0;// a 
		this.defaultR=r;// width 
		this.eleId=eleId;// ID
		this.r=r;// width ;
		$(eleId).style.width=this.r;
		this.intervalId=0;//setInterval ;clearInterval(intervalId)--stop
	}
	function reduce(index)
	{
		var showEle=a.slice(index,index+1)[0];
		if(showEle!=null)
		{
		if(showEle.r>8)
		{
			showEle.r=showEle.r-8;
			$(showEle.eleId).style.width=showEle.r	
		}
		else
		{
			$(showEle.eleId).style.display="none";
			clearInterval(showEle.intervalId);
			showEle.r=showEle.defaultR;
		}
		}
	}
	function add_a(tipObjId,width)
	{
		var t=false;
		var tipE;
		for(var i=0;i<a.length;i++)
		{
			if(a[i]!=null&&a[i].eleId==tipObjId){t=true;return a[i];}
		}
		if(t==false){var c=new Circle(width,tipObjId);c.index=a.push(c)-1;return c;}
	}
	function shrink(width,tipObjId){
		var c=add_a(tipObjId,width);
		c.intervalId=window.setInterval("reduce('"+c.index+"')",30);
	}
	function check(ele)
		{
			var blankWarn;
		if($(ele).value.trim()=="")
			{
					if($(ele+'show')==null)
					{
					 blankWarn=createEle(ele);
					}
					else blankWarn=$(ele+"show");
			
					blankWarn.style.display="block";
					blankWarn.style.zIndex=200;
					blankWarn.style.width="180";
					blankWarn.style.top=$(ele).offsetTop-22;
					blankWarn.style.left=$(ele).offsetLeft+2;
				//	blankWarn.style.filter="alpha(opacity=10)";
				return false;
			}
			else {
					blankWarn=$(ele+"show");
					if(blankWarn!=null){shrink(parseInt(blankWarn.style.width),blankWarn.id);}
					return true;
				}
		}
		function createEle(e)
		{
			var EleDiv=document.createElement("DIV");
				EleDiv.id=e+"show";
				EleDiv.className="d";
				EleDiv.innerHTML="<font size='5' color='aa2222'>!</font> ";
				document.body.appendChild(EleDiv);
				return EleDiv;
		}
	String.prototype.trim = function()
	{

		return this.replace(/(^\s*)|(\s*$)/g, "");
	}
 
	function checkForm()
	{
		var t=check("name");
		var t1=check("pw");
		var t2=check("addr");
		var t3=check("phone");
		return t&&t1&&t1&&t2&&t3;
	}

</script>
<center>
<form action="#" onsubmit="return checkForm();">
<p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><!-- 
<div class="d" id="div1" style="width:300px">kskskdf</div>
<p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/>
<div class="d" id="div2" style="width:50px;top:200px">kskskdf</div> -->
	<p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/>
 Name: <input type="text" value="Name" onBlur="check('name');"  width="300" id="name"/>
  <p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/><p/>
	Password:<input type="text" value="Password" onBlur="check('pw');"  width="300" id="pw"/>
	<p/>
	<p/>
	Address:<input type="text" value="Address" onBlur="check('addr');"  width="300" id="addr"/>
	<p/>
	<p/>
	Phone<input type="text" value="" onBlur="check('phone');"  width="300" id="phone"/>
	<p/>
	<p/>
	<input type="submit" value="submit" name="sm"/><input type="reset" value="reset" name="rs"/>
</form>
</center>
</body>
</html>