项目中通过js动态创建层的方法为表单添加错误提示

本文介绍利用动态创建层技术实现无冗余代码为表单自动添加错误提示的方法。

项目中表单输入检测是基本必定会碰到的，本文提供一种方法通过js动态创建层的方法为表单添加错误提示。该代码在IE6和firefox3.5中测试通过。

动态创建层的代码：

function createDiv(msg)
{
     //create a new empty p
     var str = document.createElement("p");
     str.id = "newp";   //p ID
     str.innerHTML=msg; // content
     document.body.appendChild(str); // add it to document body
     return str; // return the new p
}

通过调用上面函数基可以创建一个层：

var msg="X| 请输入数据！";
var newp = createDiv(msg); // msg 为层内内容

我们可以用css对创建的曾定义样式，可以采用id或者class的方式。下面通过直接指定id的方式：

<style type="text/css">
 p#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 p:
     var msg="X| 请输入数据！";
     var newp = createDiv(msg);
    // set the p position:
     newp.style.left=left;
     newp.style.top=top;
}

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索表单
， item
， 错误
， 提示
， document
， var
， 动态表单
， 表单创建
， 表单错误
， 表单错误提示
， 创建表单
， js动态添加样式
， 提示层
js动态提交表单
jquery 动态创建表单、js动态创建form表单、动态创建表单、js动态创建表单、动态创建form表单，以便于您获取更多的相关知识。