JavaScript验证页面控件值时的提示信息的定位

 

模仿asp.net
页面验证控件的现实错误提示信息的效果，用JavaScript
做了个方法，不过没有实现验证的效果，只是定位提示信息到目标元素的后面。

 

方法在IE6,IE7,FireFox3.5,Safair,Opera,Chorme
验证均可正常定位。

 

方法Imae(id,msg,css)
：insert_msg_after_element
创建一个用于显示消息的层。

第一个参数id
，就是目标元素的id
。

第二个参数msg
，就是要显示的信息。

第三个参数css
，定义消息框的样式。使用JSON
格式{color:

”

red
”

,fontsize:
”

12px
”

,border:
”

dotted 1px gray
”

}

调用这个方法，将在目标元素的后面显示错误消息。

 

Imae2(id,tag,css)
：insert_msg_after_element
创建一个用于显示消息的层。

第一个参数id
，就是目标元素的id
。

第二个参数tag
，是目标元素的属性，比如可以把要显示的消息写在元素的属性里面。例如：

<
input
type
="text"
id
=
"txt1"
err_msg
=
"

不能为空"

/>

第三个参数css
，定义消息框的样式。

 

rmd(id)
：移除一个消息层。

参数id
，为目标元素的id
，而不是要删除div
的id
。

 

查看效果：http://www.xiagezhao.com/validate2/validate/1.htm

下面是代码：

//
用于显示消息的层集合。用于验证通过时，删除提示消息

var
validateDivArray = [] ;

 

//
创建一个用于显示消息的层。

function
Imae2(id,tag,css){

    var
obj = document.getElementById(id) ;

    var
msg = obj.getAttribute(tag)

    Imae(id,msg,css);

}

//
创建一个用于显示消息的层

function
Imae(id,msg,css){

    var
obj = document.getElementById(id) ;

    var
pos = new
Position(id);

    if
(obj){

        var
_msg = msg ;

        var
_css = css ;

        var
_color = "red"
,_fontsize = "12px"
,_border="dotted 1px gray"
;

        var
_width = pos.width ;

        var
_height = pos.height ;

        //

设定默认值，在元素没有设置height
，或者height
设置为“auto
”时。

        if
(!_width || _width=="100%"
|| _width=="auto"
){

            if
(_width!=0)

            switch
(obj.tagName)

            {

                case
"INPUT"
:{_width="150px"
}break
;

                case
"SELECT"
:{_width="50px"
}break
;

                //...

            }

            //_width=="100%"

        }

        if
(css){

            if
(css.color){_color = css.color;}

            if
(css.fontsize){_fontsize = css.fontsize;}

            if
(css.border){_border = css.border;}

        }

        var
divMsg = document.createElement("div"
);

        with
(divMsg.style){

        //////////////////////////////////////////////////////////////////////////

        //

给元素定位在IE
和FireFox
下面有一小处需要注意                        //

        // obj.style.top = 100 ; 

这样写在IE
下面显示正常，但是在FireFox
下面就   //

        //

无法正常定位。解决方法：  solvent: obj.style.top = 100 + "px";       //

        //////////////////////////////////////////////////////////////////////////

            top = GetTop(id)+"px"
;

            left = (GetLeft(id) +Math.abs(_width.replace("px"
,""
))+10)+"px"
;

            color = _color;

            border = _border;

            fontSize = _fontsize;

            position = "absolute"
;

            zIndex = 9900+validateDivArray.length;

        }

        divMsg.innerHTML = _msg ;

        var flag = false ;

        for(var i =0 ;i<validateDivArray.length;i++){

            if(validateDivArray[i][0] == obj){

                flag = true ;                             

            }

        }

         if(!flag){

            validateDivArray[validateDivArray.length]=[obj,divMsg] ; 

            document.body.appendChild(divMsg);        

        }

    }

}

//
从集合中移除一个消息层

function
rmd(id){

    var
obj = document.getElementById(id);

    if
(obj){

        var
_obj = obj ;

        if
(validateDivArray.length>0){

            for
(var
i =0 ;i<validateDivArray.length;i++){

                if
(validateDivArray[i][0] == obj){

                    if
(validateDivArray[i][1]){

                        document.body.removeChild(validateDivArray[i][1]);

                        validateDivArray.splice(i,1);

                    }

                }

            }

        }

    }

}

//
获取页面元素的Y
坐标

function
GetTop(id){

    var
obj = document.getElementById(id);

    if
(!obj)return
0;

    var
top = 0 ;

    while
(obj){

        top += obj.offsetTop ;

        obj = obj.offsetParent ;

    }

    return
top ;

}

//
获取页面元素的X
坐标

function
GetLeft(id){

    var
obj = document.getElementById(id);

    if
(!obj)return
0;

    var
left = 0 ;

    while
(obj){

        left += obj.offsetLeft ;

        obj = obj.offsetParent ;

    }

    return
left ;

}

//
元素坐标类，包涵四个属性，x,y,width.height;

function
Position(id){

    var
_this = this
;

    _this.top = 0 ;

    _this.left = 0 ;

    _this.width = 0 ;

    _this.height = 0 ;

 

    function
Init(){

        var
obj = document.getElementById(id);

        if
(obj){

            _this.top = GetTop(id);

            _this.left = GetLeft(id);

            _this.width = obj.style.width ;

            _this.height = obj.style.height ;

        }

    }

    Init();//

构造方法

}