入力ブランクチェック
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>