项目中表单输入检测是基本必定会碰到的，本文提供一种方法通过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.οnchange=function()
 {
     submit();
 } 
}
onload时调用：window.οnlοad=addEnven;
 
完整代码：
test.htm
<html<head>
<script language="javascript">
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;
}
</script>
<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" οnclick="submit()">
</td></tr></table>
</body>
</html>