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();// 构造方法

}