js 自定义title提示框(附加文本框内容验证) (II)

在上一篇的基础上添加了一个小功能,验证文本框是否为空和数字

效果图

页面代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>简单js验证</title>
      <style type="text/css">
        body
        {
            background-color: White;
        }
        input
        {
            background-color: white;
        }
    </style>
    <script type="text/javascript">
        var _errorimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAYBQTFRF8lxf82Nm82Rn9YeI8E9W8FBX7lhd8ltf8Vtg8mds725z621x8HN39Xp/9XyA7UdR8U1W8U5W3UpU3ktT309X9W119G11uxIgwh8rzik4xis27jtI0ThF3UBN8U5a61Vg9GBt01Zf3GlyyBYpyBgqyBgryBkrwhwt5C9A12Nu33aBziI535ql5qu1yl1Jzm5ewltM94mA96KayUc+9n959oB59oiA4GFb9XZy83l07Xl1+IuI8YyJ8mZm829t7YKA94uJ8IeF/7+/27a248TE////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFapVIAAAAIB0Uk5T/////////////////////////////////////////////////////////////////////////////////////////////wD///////////////////////////////////////////////////////////////////////////+SDBJ4AAAAxElEQVQoU12QaRPBQAyG100P66baonVV0ZZ102Ir/v9PklU+8E6SSZ6ZdyYJef6JiDkOPMY8/yF6AXy2v67X1z3zExCwy257PG5WJxYIELP7IYIowryzGIHdOIchhxB4eGtYCAw5XSAEgBcLKdlAMCpXUACVajVXHiMYDhzH4QBYnd5QWPq6zkGErveFxTZbFCilnNOmaSNYzqVS9q2SpC3FYq6mqHmUqmhusro7rcuZjFzrzD63PBdWtz0xrMX3uJ8HvABbGy/xBRy6/gAAAABJRU5ErkJggg==";//"img/error.gif";
        var _infoimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAGBQTFRF/v7/8fL18vP1AkaM/f7/CFSYC12fDFyfDmKkVZC/ttDk+v3/9Pv/9/z/7fL19vz/7PL1+f3//P7/lrbF9fz/+P3/9/3/+/7/9v3/x9TQ////AAAAAAAAAAAAAAAAAAAAhiSZVQAAACB0Uk5T//////////////////////////////////8A//////+Vml+sAAAAkElEQVQoU2WQiw7CIAxF0W7aFuvGeKzs/z/UlhkT9SYk3JM+LoTjR8F9JwRA6n53kIH4emGCfIKMPCmiBkYj4ehg3oFODN0A0aaq42xEBpCjF1jFvjMagDWlOFpifMIAtVa93zTVujpAFmk6z61JGy1EIqIARRcZQ21tKWBayrnWgz2G3sHO6GY/0f8f9/UBL0rbEWYf5FKOAAAAAElFTkSuQmCC";//"img/info.gif";
        var _helpimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAGBQTFRF/v7/8fL18vP1zNTe2+Tu/f7/KGKWRHakXYmxX4qxapK3bJS4eZ2+lbLMorvTUICq9fv/+v3/6PD19Pv/9/z/7fL19vz/7PL1+f3//P7/9fz/+P3/9/3/+/7/9v3/////d2mbSgAAACB0Uk5T/////////////////////////////////////////wBcXBvtAAAAlUlEQVQoU2WQ7Q6CMAxFUcsVP0oZzgFbkfd/S9sZY9T+2XrS3J6t2X6qqb0IIFKvDgRM+x0xHBkQplatGmIjBkAtHQE/4EB40RMuDOhiIwYorP1VVaArOcA0z0G1QxfCHRWUUqw/z6VMDoRiVLUEjXqoGRyN9H16pFhDbW3ONpFTfq11scG8httbrKqP40f9/3FfH/AEw+8Uq/M+gIEAAAAASUVORK5CYII";//"img/help.gif";
        var _warnigimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAYBQTFRF/ttz/tt0/tt2/96B/t6B/+GK/uCK/+KP/uKO/+OX/uSX/+We/+ae/uWe/uae/+en/+u1/uu1/vTW/tJk/uCV/+mz/+3B/+7B//HN//TX//Xc/8Vh/sVh/8Zi/sVi/tSK/9eR/tyf/+Gr/rQ8/rU8/rQ97qs9/rtJ/rpK/rtK/r9U/8FY/sFY/8FZ/sFZ/8Vi/st3/st488R4/tGH/tKI48GL/9uf6siS/+Cre1ETflMUhVgWg1YWflQVhFgXi10ZilwZil0Zj2AbkWEcl2UelGQdmmgfy59jyZxixppgxZlgxZpg0qRn0KNmzJ9kyp5jyJxixpthxJpg06Vo0qRo0qVo0aNnz6JmzqJmzaBly55kyZ1jx5tix5xixZthyKJvzqBlz6FmxZlhzq6F1bye3cy5////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAuvM8FQAAAIB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AP////////////////////////////////8rdbadAAAAvElEQVQoU2NIQwMMEH5qcHAqhAUVCJWSCkYWSPURkgyBKIGoCBMzNZfwRQik+IpaWoqHp8BVRAhYWNkqCSbCBOITRBTtrM34I+OhZvixahk72JtosflBBOLdhdWMnJyN1JiigEqAAv4MyiqGri4GqqqM0SCB+ABmTXUQ0NRg8YgHCsRw6OrpyNu7yWvrarPHAgUCueSkZRVsHBXkZPQ5Y4ACccm8fNw8IMDNnewJMtQryDvJywtEBiWlpQEAuj9KICZnloAAAAAASUVORK5CYII=";//"img/warning.gif";
        var _topimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACWSURBVChTY2DAAy6uq44HYXxq8MpdXF9V/+jsvP8gTJZBF9ZXzX/7cNv///9vgfHTS0v+X1xf3U+0i9ANgBkEMhQkh9egu6vK+a9sbTz/4dkeuAtgBhBlEMyAbx9O4DQA3SCQHrirrqyr1b++q+M+MQbADPr8+tB/kKvhBoEC7OfX8/X//98mCb99uL0eGIP5RAc2IYUAVoL/fCeahjAAAAAASUVORK5CYII=";
        var _leftimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAARCAYAAAAPFIbmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC0SURBVChTY2DAAS6tq/a/u6qcH5c8w8V11fGPzs77j1PBlXW1+vdPzPj///8t7IpACm7t73v/59cV7IrQFWCYhE0BiiKQD65sbTwPswIkCcNwh4MUfPtwAi6BVdHlLQ3/CSq6uL4q/9rOtv94rQPZe2F91fyb+3owFGIEJkwhVjchqwYqPA+KDgzfISsCBQeyQpxxB1V4/9WdDbgjGKQbFAMX1le/ByUXnKaBJK6trZaHpScAuOL9o96G5CcAAAAASUVORK5CYII=";//"img/zuo.PNG";
        var _closeimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACLSURBVChTY5g5c2b8jBkz8hmwAKC4PlC+fs6cOfIMQM57IP4PxPOR1YIUweRAihmgJoIUwhUjKwKyzwPV8IMNQVO8HskWhCKYdWiKQaZjKgIpRrMOw80wq/mRrLsPde9/sCeQrAQpOg+VBFuH7AwQG6wWSREomPRhBoCCC2YykPYHKQS5B0URFsX7AcMorJRqXs2bAAAAAElFTkSuQmCC";
        var _valueerrorimg = "data:image/png;base64,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";
        var _valuetrueimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAGYktHRAD/AP8A/6C9p5MAAAIISURBVDhPpVNNSFRRGP3e2DiPEV4gjpELoyEsyKSFkHtp5cZwYYuWgZsKUtDESMJIUEudFhJEBKb9aUoICimBo+g4WDEzTaMyluTQIl20CXJz/I4zvpk3Wz843O/nnHPve+8+ASBHwYG4+nqbjZujfrM3Wnm7f/1CcDBZ9Z9gzh5nuVxqbQMRMTo+VZzqTZyPvE+dxPJOEdb+Ggdgzh5n5JBLI4dBXWtp0cNv5+IfUiUI/RHM/RZMbafBnL3JXyUgh1yHgTq62hf8ra+2fJhX8sSWE+M/BO+SgsTuDbzc9IFcauwTaGG2r5wOT/40EUw1YnRD8FoFb1XIdWSNp03H2IYJcqnJNbDufC7fe7Nu2MQX3wXDasT1MAILapgwQK4aWLkGxS0rZXtPYwb6glnBUDSbd88JAmHBMzVoDpX9U4Nih0HTrC/SH3XjUUjQ9TEr5O6s2R+KCwbjbpCbb2A1PLd6Or94MaC7di8J7s2kTbiyZj+gBuSQm/8I5vFy19lr01ayLexBT0Rwf1FwV3fmyrovJuCMHHLzX6KLRzpTd+xy45R389ZSITrCBehaFTz4qkarBWCPM3LIdXxGXgoNt+KE12dU1z4ufFI/5olcnTVBXBn3xNjjjBxy8y8SDYyMCd39iouKS4qaTM4eZ9yI3OxVZpETfByTLykjoIg5e5zZYX/Go/zO+wND/bVOgnA2AAAAAElFTkSuQmCC";
   
        var _divbackgroundcolor = "#ffffda";//ffffcc
        var _divbordercolor = "#C89E60";//"#d1af7b";//000000 #d1af7b
        function body_load(){
        }
        //o: 对象的id, t:类型(error,help,info,warning), p:位置(top,left),m:输出消息
        function showInfo(o,t,p,m){
            if(!$(o)){
                return;
            }
            var _infobackgroundimg = _infoimg;
            switch(t){
                case "E":
                    _infobackgroundimg = _errorimg;
                break;
                case "I":
                    _infobackgroundimg = _infoimg;
                break;
                case "H":
                    _infobackgroundimg = _helpimg;
                break;
                case "W":
                    _infobackgroundimg = _warnigimg;
                break;
            }
            var _newdiv = window.document.createElement("div");
            _newdiv.style.position = "absolute";
            
            var iut = $(o);
            if($(o + "_newdiv")){
                $(o + "_newdiv").parentNode.removeChild($(o + "_newdiv"));
            }
            _newdiv.style.top = getTop(iut) + "px";
            _newdiv.style.left = getLeft(iut) + 16 + getWidth(iut) + "px"; 
            var _weizhi = '<img style="position:absolute;left:-7px;top:3px;display:block;" src="'+_leftimg+'" />';
            if(p == "T"){
                _weizhi = '<img style="position:absolute; top:-7px; display:block;" src="'+_topimg+'" />';
                _newdiv.style.top = getTop(iut) + 16 + getHeight(iut) + "px";
                _newdiv.style.left = getLeft(iut) + "px"; 
            }
            var _contentText = '<div onselectstart="return false;" oncontextmenu="return false;" style="border:1px solid #f0f0f0;background-color:#e0e0e0;position:relative;padding-bottom:2px; padding-right:2px; font-size:12px; margin-left:6px; margin-top:0px;"><div style="padding:3px; cursor:default;border:1px solid '+_divbordercolor+';background-color:'+_divbackgroundcolor+';position:relative; margin-left:-6px; margin-top:-6px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right" style="18px;" valign="top"><img style="" src="' +_infobackgroundimg+'" />'+_weizhi+'</td><td style="3px;"></td><td style="padding-left:3px;padding-right:3px;white-space:nowrap;">'+m+'</td><td style="18px; padding-top:0px;" valign="top" align="right"><img src="'+_closeimg+'" onclick="closeInfo(\''+o+ '\');" style="cursor:pointer;" /></td><td style="6px;"></td></tr></table></div></div>';
            _newdiv.id = o + "_newdiv";
            _newdiv.innerHTML = _contentText;
            window.document.body.appendChild(_newdiv);
                        
        }
        //o: 对象id
        function closeInfo(o){
            if($(o + "_newdiv")){
                $(o + "_newdiv").parentNode.removeChild($(o + "_newdiv"));
            }
        }
        //获取文本框的位置
        //对象距离左面的距离
        function getLeft(o)
        {
            var _oLeft = o.offsetLeft;
            while(o.offsetParent!=null) { 
                var _oParent = o.offsetParent;
                _oLeft += _oParent.offsetLeft;
                o = _oParent;
            }
            return _oLeft;
        }
        //对象距离上面的距离
        function getTop(o)
        {
            var _oTop = o.offsetTop;
            while(o.offsetParent!=null) { 
                var _oParent = o.offsetParent;
                _oTop += _oParent.offsetTop;
                o = _oParent;
            }
            return _oTop;
        }
        //对象高度
        function getHeight(o){
            return o.clientHeight;
        }
        //对象的宽度
        function getWidth(o){
            return o.clientWidth;
        }
        //获取对象
        function $(o){
            return window.document.getElementById(o);
        }
        //添加事件,o:对象,n:事件名称,f事件方法
        function addEvent(o,n,f){
            if(o){
                if (window.attachEvent) {
                    o.attachEvent("on" + n, f);
                }else{
                    o.addEventListener(n, f, false);
                }
            }
        }        
        //验证文本框
        //文本框获得焦点 p1: 对象id, p2: 输出内容, p3: 类型
        function txtFocus(p1,p2,p3){
            removeimage(p1);
            showInfo(p1,'I','',p2);
        }
        //文本框失去焦点 p1: 对象id p3: 输出内容, p2: 类型
        function txtBlur(p1,p3,p2){
            addimage(p2,$(p1),p1,p3);
            closeInfo(p1);
        }
        //添加图片p1: 类型(N:数字), p2:对象, p3:对象id, p4:输出内容
        function addimage(p1,p2,p3,p4){
            if(p1 == "N"){
                if(p2.value == "" || isNaN(p2.value)){
                    createImage(p3,"E",p4);
                }else{
                    createImage(p3,"T",p4);
                }
            }else{
                if(p2.value == ""){
                    createImage(p3,"E",p4);
                }else{
                    createImage(p3,"T",p4);
                }
            }
        }
        //移除图片对象: o:对象id
        function removeimage(o){
            if($(o + "_newimg")){
                $(o + "_newimg").parentNode.removeChild($(o + "_newimg"));
            }
        }
        //o:名称 , t: 类型,(E:错误,T:正确) , c: 内容
        function createImage(o,t,c){
            if(!$(o)){
                return;
            }
            var _infobackgroundimg = _valueerrorimg;
            switch(t){
                case "E":
                    _infobackgroundimg = _valueerrorimg;
                break;
                case "T":
                    _infobackgroundimg = _valuetrueimg;
                break;
            }
            var _newdiv = window.document.createElement("img");
            _newdiv.style.position = "absolute";
            
            var iut = $(o);
            if($(o + "_newimg")){
                $(o + "_newimg").parentNode.removeChild($(o + "_newimg"));
            }
            _newdiv.id = o + "_newimg";
            _newdiv.style.top = getTop(iut) + "px";
            _newdiv.style.left = getLeft(iut) + 8 + getWidth(iut) + "px"; 
            _newdiv.src = _infobackgroundimg;
            if(t == "E"){
                _newdiv.setAttribute("onmousemove",document.all && !document.documentMode ? eval(function(){showInfo(o + "_newimg",'W','',c);}): "showInfo('"+ o + "_newimg','W','','"+c+"');");
                _newdiv.setAttribute("onmouseout",document.all && !document.documentMode ? eval(function(){closeInfo(o + "_newimg");}):"closeInfo('"+ o + "_newimg');");
            }else{
                _newdiv.title = "验证通过";
            }
            window.document.body.appendChild(_newdiv);
        }
        
        //
        //文本框加载事件 arry:文本框的集合对象
        //
        function textsLoad(arry){
            if(arry){
                _t_lis = arry;//为最终查看使用
                for(var i=0;i<arry.length;i++){
                    var txtid = arry[i][0];
                    var txttxt = arry[i][1];
                    var obj = $(txtid);
                    addimage(arry[i][2],obj,txtid,txttxt);
                    obj.setAttribute("onfocus",document.all && !document.documentMode ?eval(function(){txtFocus(txtid,txttxt,arry[i][2]);}) :"txtFocus('"+txtid+"','"+txttxt+"','"+arry[i][2]+"');");
                    obj.setAttribute("onblur",document.all && !document.documentMode ? eval(function(){txtBlur(txtid,txttxt,arry[i][2]);}):"txtBlur('"+txtid+"','"+txttxt+"','"+arry[i][2]+"');");
                }
            }
        }
        var _t_lis = null;
        //获得结果
        function retrunValue(){
            if(_t_lis){
                for(var i=0;i<_t_lis.length;i++){
                    var obj = $(_t_lis[i][0]);
                    if(obj){
                        if(_t_lis[i][2] == "N"){
                            if(obj.value == "" || isNaN(obj.value)){
                                obj.focus();
                                return false;
                            }
                        }else{
                            if(obj.value == ""){
                                obj.focus();
                                return false;
                            }
                        }
                    }
                }
            }
            return true;
        }
    </script>
    <script type="text/javascript">
    window.onload = function(){
        var txtlist = new Array(
            new Array("txtname","姓名不能为空!",""),
            new Array("txtphone","手机号不能为空!",""),
            new Array("txtage","年龄必须为数字!","N") //参数1: 文本框的id, 参数2: 输出的字符串, 参数3: 为空则是为空判断,如果为N则是数字判断
        );
        textsLoad(txtlist);//调用textsLoad(array)方法加载文本
    }
    function resubmit(){
        if(retrunValue()){//调用retrunValue()方法检查是否满足条件
            alert("提交成功");
        }else{
            alert("提交失败");
        }
    }
    </script>
 </head>
 <body>
    <div style="">
        <input id="txtname" type="text" value="" /><br />
        <input id="txtphone" type="text" value="110"/><br />
        <input id="txtage" type="text" value=""/><br />
        <input type="button" value="提交" id="butsubmit" onclick="resubmit();" />
		<div id="detaildiv" onmouseover="showInfo('detaildiv','H','T','这里是帮助按钮!<br>请输入所以的信息!<br><font color=\'red\'>(全部不能为空!)</font><br><font color=\'green\'>(请点击关闭按钮关闭该提示!)</font>');" style="20px; height:20px; border:1px solid green; cursor:pointer;float:left;margin-left:8px;margin-right:8px;" align="center">?</div>
    </div>
 </body>
</html>
原文地址:https://www.cnblogs.com/weloglog888/p/2832794.html