1、JS文本（其中有jquery.js的方法）

// 显示输入错误提示信息
function updateTips(n) {
    $("#errTips").html( $("#errTips").html() + "<font color=\"red\">" + n + "</font>" + "\n" ) ;
}
// 效验数据长度
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;
}

2、页面

<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>

3、CSS样式

.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; }