JSP spring struts ibatis JS 효과 크기, 형식, 길이

//           
function updateTips(n) {
    $("#errTips").html( $("#errTips").html() + "<font color=\"red\">" + n + "</font>" + "
" ) ;
}
//       
function checkLength(o, min, max,ifnull) {
    //o.removeClass("ui-state-error");
    if(ifnull){
        if((o.val()).length==0){
            
        }else{
            if ( (o.val()).length > max || (o.val()).length < min) {
                updateTips(o.attr("owntxt") + "         "+min+"  "+max+"   ");
                o.addClass( "ui-state-error" );
            }
        }
    }else{
        if ( (o.val()).length > max || (o.val()).length < min) {
            updateTips(o.attr("owntxt") + "         "+min+"  "+max+"   ");
            o.addClass( "ui-state-error" );
        }
    }
}
//     ，  datatype          
function checkRegexp(o, regexp) {
    //o.removeClass("ui-state-error");
    if (!(regexp.test(o.val()))){
        updateTips(o.attr("owntxt") + "     ，     ");
        o.addClass( "ui-state-error" );
    }
}
//            
function compare(o1, o2) {
    //o1.removeClass("ui-state-error");
    //o2.removeClass("ui-state-error");
    if (o1.val() != null && o2.val() != null) {
        if (o1.val() > o2.val()) {
            updateTips(o1.attr("owntxt") + "        ，     ");
            o1.addClass( "ui-state-error" );
            o2.addClass( "ui-state-error" );
        }
    }
};
//         
function isSpace(str)
{
    if(Trim(str)=="" || Trim(str)=="null" || str==null){
        return true;
    }
    return false;
}
//       
function mousePosition(ev){
    if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
     }
     return {
      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
      y:ev.clientY + document.body.scrollTop  - document.body.clientTop
      };
}

function mouseMove(ev){
   ev = ev || window.event;
   var mousePos = mousePosition(ev);
   document.getElementById('xxx').value = mousePos.x;
 document.getElementById('yyy').value = mousePos.y;
}

document.onmousemove = mouseMove;
function seashowtip(id,flag,iwidth){
    var my_tips=$("#mytips");
    var tips;
    if($("#"+id).attr("datatype")=="normal"){
        tips="   "+$("#"+id).attr("min")+"  "+$("#"+id).attr("max")+"      ";
    }else if($("#"+id).attr("datatype")=="number"){
        tips="   "+$("#"+id).attr("min")+" "+$("#"+id).attr("max")+"    ";
    }else if($("#"+id).attr("datatype")=="floatdata"){
        tips="    "+$("#"+id).attr("min")+" "+$("#"+id).attr("max")+"      1   ";
    }
    if(flag){
        my_tips.html(tips);
        my_tips.css("display","");
        my_tips.css("width",iwidth);
              var  l=document.getElementById('xxx').value;
              var  t=document.getElementById('yyy').value;
              my_tips.css("left",l);
              my_tips.css("top",t);
       }
    else
    {
        my_tips.css("display","none");
       }
    }
//        
function validate() {
    var tipObjs = $("input[datatype]");// document.getElementsByTagName("input");
    var min = 5;
    var max = 16;
    var regexp="";
    var lower = null;//           
    var upandlower = 0;//              
    $("#errTips").html("");//
    for (i = 0; i < tipObjs.length; i++) {
        $(tipObjs[i]).removeClass("ui-state-error");
        if ( tipObjs[i].getAttribute("type") && tipObjs[i].getAttribute("type") == "text") {
            
            //     
            max =$(tipObjs[i]).attr("max");
            min =$(tipObjs[i]).attr("min");
            if(max !='undefined' && min !='undfined'){//                
            if($(tipObjs[i]).attr("ifnull") == "notnull"){//         
                if($(tipObjs[i]).attr("datatype") == "normal"){
                    checkLength($(tipObjs[i]), min, max,0);
                }
                }else{//          
                    if($(tipObjs[i]).attr("datatype") == "normal"){
                        checkLength($(tipObjs[i]), min, max,1);
                    }
                }
        }
            
        //     ，            ,              ，       。
            if($(tipObjs[i]).attr("datatype") == "normal"){
                regexp=/\w$/;
                checkRegexp($(tipObjs[i]),regexp);
            }
            else if($(tipObjs[i]).attr("datatype") == "floatdata")
                {
                    eval("regexp=\/0\\.\\d{"+min+","+max+"}$\/");
                   // regexp=/0\.\d{1,2}$/;
                    checkRegexp($(tipObjs[i]),regexp);
                }
            else if($(tipObjs[i]).attr("datatype") == "number"){
                eval("regexp=\/\\d{"+min+","+max+"}$\/");
                    checkRegexp($(tipObjs[i]),regexp);
            }
            
            //        ，        
            if(upandlower==0){
                lower = $(tipObjs[i]);
                upandlower=1;
            }else if(upandlower==1){
                if(lower.attr("owntxt") == $(tipObjs[i]).attr("owntxt")){
                    compare(lower,$(tipObjs[i]));
                }else{
                    lower = $(tipObjs[i]);
                }
            }
        }
    }
    if($("#errTips").html()!="")
        {
           return false;
        }
    return true;
}

<table width="600" border="0" cellpadding="0" cellspacing="1">
    <tr>
        <td>     ：</td>
        <td><input type="text" max ="20" min ="5" datatype="normal" owntxt="     " ifnull="notnull" id="groupName" name="tpgDTO.groupName"
         class="text ui-widget-content ui-corner-all" style="width: 400px;" value="<s:property value="tpgDTO.groupName"/>" onmousemove="seashowtip('groupName',1,150)" onmouseout="seashowtip('groupName',0,150)"/>
        </td>
    </tr>
    <tr>
        <td>  </td>
        <td><input type="text" max = "300" min = "3" datatype="normal" owntxt="  " ifnull="cannull" id="remark" name="tpgDTO.remark"
        class="text ui-widget-content ui-corner-all" style="width: 400px;" value="<s:property value="tpgDTO.remark"/>" onmousemove="seashowtip('remark',1,150)" onmouseout="seashowtip('remark',0,150)"/>
        </td>
    </tr>
    <tr>
        <td>test   ：</td>
        <td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="   " ifnull="cannull" id="groupName"
         class="text ui-widget-content ui-corner-all" style="width: 400px;"/>
        </td>
    </tr>
    <tr>
        <td>test  ：</td>
        <td><input type="text" max ="8" min ="1" datatype="number" owntxt="  " ifnull="cannull" id="groupName"
         class="text ui-widget-content ui-corner-all" style="width: 400px;"/>
        </td>
    </tr>
    <tr>
        <td>test      ：</td>
        <td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="  " ifnull="cannull" id="groupName"
         class="text ui-widget-content ui-corner-all" style="width: 400px;"/>
        </td>
    </tr>
    <tr>
        <td>test      ：</td>
        <td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="  " ifnull="cannull" id="groupName"
         class="text ui-widget-content ui-corner-all" style="width: 400px;"/>
        </td>
    </tr>
    <tr>
        <td>  </td>
        <td><button id="show-filtercond-btn" style="font-size: 90%;">      </button></td>
    </tr>
</table>

<div id="errTips"></div>

.ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/fef1ec_40x100_textures_05_inset_soft_95.png) 50% bottom repeat-x; color: #cd0a0a; }