利用动态创建层技术实现无冗余代码为表单自动添加错误提示

来源：互联网发布：张店淘宝客服招聘编辑：程序博客网时间：2024/05/01 13:44

项目中表单输入检测是基本必定会碰到的，本文提供一种方法通过js动态创建层的方法为表单添加错误提示。该代码在IE6和firefox3.5中测试通过。
动态创建层的代码：
function createDiv(msg)
{
　//create a new empty div
　var str = document.createElement("div");
　str.id = "newdiv"; //div ID
　str.innerHTML=msg; // content
　document.body.appendChild(str); // add it to document body
　return str; // return the new div
}
通过调用上面函数基可以创建一个层：
var msg="X| 请输入数据！";
var newdiv = createDiv(msg); // msg 为层内内容
我们可以用css对创建的曾定义样式，可以采用id或者class的方式。下面通过直接指定id的方式：
<style type="text/css">
　div#newdv{width:120px;height:16px;padding-top:2px;border:solid 1px red;position:absolute;background-color:red;color:#fff;font-size:12px;}
</style>

当我们提交表单时，就可以对各个表单进行检验了，当检验到某表单不合法，我们需要在该表单的位置给出错误提示。步骤是：先找出该表单的位置，然后以错误信息创建错误提示新层，将层的位置设置在该表单上。
function submit()
{
　var item = document.getElementById("itemId"); // itemId is the wrong input item
　var left=item.offsetLeft+(item.style.width.replace("px"，""))/1; // get the item left position
　var top=item.offsetTop; // get the item top position

　// create new div:
　var msg="X| 请输入数据！";
　var newdiv = createDiv(msg);
　// set the div position:
　newdiv.style.left=left;
　newdiv.style.top=top;
}
获取表单控件位置：item.offsetLeft， item.offsetTop；当表单嵌套在其他控件内时：
function getTop(e)
{
　var offset=e.offsetTop;
　if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
　return offset;
}
function getLeft(e)
{
　var offset=e.offsetLeft;
　if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
　return offset;
}
事件的坐标：window.event.x， window.event.y。

动态给控件添加事件：
function addEnven()
{
　var item = document.getElementById("itemId");
　item.onchange=function()
　{
　　submit();
　}
}
onload时调用：window.onload=addEnven;

完整代码：
test.htm
<html<head>
　< language="java">
　　function submit()
　　{
　　　var item = document.getElementById("itemId"); // itemId is the wrong input item
　　　var left=getLeft(item)+(item.style.width.replace("px"，""))/1; // get the item left position
　　　var top=getTop(item); // get the item top position
　　　// create new div:
　　　var msg="X| Please input number！";
　　　var newdiv = createDiv(msg);
　　　// set the div position:
　　　newdiv.style.left=left;
　　　newdiv.style.top=top;
　　}
　　function createDiv(msg)
　　{
　　　//create a new empty div
　　　var str = document.createElement("div");
　　　str.id = "newdiv"; //div ID
　　　str.innerHTML=msg; // content
　　　document.body.appendChild(str); // add it to document body
　　　return str; // return the new div
　　}
　　function getTop(e)
　　{
　　　var offset=e.offsetTop;
　　　if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
　　　return offset;
　　}
　　function getLeft(e)
　　{
　　　var offset=e.offsetLeft;
　　　if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
　　　return offset;
　　}
</>
<style type="text/css">
div#newdiv{width:120px;height:16px;padding-top:2px;border:solid 1px red;position:absolute;background-color:red;color:#fff;font-size:12px;}
</style>
</head>
</body>
　<br><br><br><br><br><br><br><br>
　<table><tr><td width="400" align="center">
　　<input id="itemId" type="text" style="width:120px;height:20px;"><br>
　　<input type="button" value="call" onclick="submit()">
　</td></tr></table>
</body>
</html>