Prototype的验证框架

这个框架源于Andrew Tetlaw，见：http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype，修改于badqiu，见：http://badqiu.javaeye.com

如今我再次修改，以适合我自己项目的需要~

原来的框架是在每个验证控件的后面添加一个提示，但我们的项目是所有的提示都放在同一个地方~

这个框架被我改得乱七八糟了，也许不太适合。如果你有相同的需求，可以试一下这个东西。

使用方法和他们原来的差不多：

页面代码：

 

< table  style ="width: 100%;" >
     < tr >
         < td  class ="fim_l"  colspan ="4" >
             < asp:Label  ID ="lblErr"  runat ="server"  CssClass ="com_errorInfo" ></ asp:Label >
         </ td >
     </ tr >
     < tr >
         < td  style ="width: 120px;"  class ="fim_l" >
            报表标题：
         </ td >
         < td  class ="fim_r"  colspan ="3" >
             < asp:TextBox  ID ="txbName"  runat ="server"  MaxLength ="100"  Width ="95%" ></ asp:TextBox >< span
                 class ="com_errorInfo" > * </ span >
         </ td >
     </ tr >
     < tr >
         < td  style ="width: 120px;"  class ="fim_l" >
            考评周期：
         </ td >
         < td  class ="fim_r" >
             < asp:DropDownList  ID ="ddlSolution"  runat ="server"  DataTextField ="CycleDes"  DataValueField ="SolutionID"
                Width ="180px" >
             </ asp:DropDownList >
             < span  class ="com_errorInfo" > * </ span >
         </ td >
         < td  style ="width: 120px;"  class ="fim_l" >
            考评总分：
         </ td >
         < td  class ="fim_r" >
             < asp:Label  ID ="labTotalScore"  runat ="server"  Text ="Label" ></ asp:Label > 分
         </ td >
     </ tr >
     < tr >
         < td  style ="vertical-align: top;"  class ="fim_l" >
            描述：
         </ td >
         < td  class ="fim_r"  colspan ="3" >
             < asp:TextBox  ID ="txbDes"  runat ="server"  Rows ="3"  TextMode ="MultiLine"  Width ="95%"  maxLen ="500"  CssClass ="textBox_wordBreak" ></ asp:TextBox >
         </ td >
     </ tr >
     < tr >
         < td  style ="width: 120px;"  class ="fim_l" >
            制表人：
         </ td >
         < td  class ="fim_r"  style ="width: 300px;" >
             < asp:Label  ID ="lblCreator"  runat ="server" ></ asp:Label >
         </ td >
         < td  style ="width: 120px;"  class ="fim_l" >
            制表时间：
         </ td >
         < td  class ="fim_r" >
             < asp:Label  ID ="lblCreateOn"  runat ="server" ></ asp:Label >
         </ td >
     </ tr >
</ table >
< div  id ="divAlertScore"  runat ="server" >
     < br  />
     < table  cellpadding ="0"  cellspacing ="0"  border ="0"  class ="tab_sec_tb2" >
         < tr >
             < td  class ="tab_sec_title2" >
                区域考评评分预警
             </ td >
         </ tr >
         < tr >
             < td >
                 < table  class ="tab_sec_tb2" >
                     < tr >
                         < td  class ="fim_l"  style ="width: 120px" >
                            低分预警线：
                         </ td >
                         < td  class ="fim_l" >
                             < asp:TextBox  ID ="txtLowScore"  runat ="server"  MaxLength ="6"  Width ="40px"  onKeyUp ="refuseWithReg(this,/[^0-9.-]/i);" ></ asp:TextBox > 分 < span
                                 class ="com_errorInfo" > * </ span >
                         </ td >
                         < td  class ="fim_l"  style ="width: 120px" >
                            高分预警线：
                         </ td >
                         < td  class ="fim_l" >
                             < asp:TextBox  ID ="txtHighScore"  runat ="server"  MaxLength ="6"  Width ="40px"  onKeyUp ="refuseWithReg(this,/[^0-9.-]/i);" ></ asp:TextBox > 分 < span
                                 class ="com_errorInfo" > * </ span >
                         </ td >
                     </ tr >
                     < tr >
                         < td  colspan ="4"  class ="fim_l" >
                            说明：当评分小于等于 < b > 低分预警线 </ b > 、或大于等于 < b > 高分预警线 </ b > 时，必须填写考评备注。
                         </ td >
                     </ tr >
                 </ table >
             </ td >
         </ tr >
     </ table >
</ div >  

 

检查JS：

 

function  checkData(action) { 

     var  valid  =   new  Validation( " divBaseInfo " , { onSubmit:  false , useTitles:  false , immediate:  false , stopOnFirst:  true , validateAdvice:  ' <%=lblErr.ClientID %> '  }); 

    $( " <%=txbName.ClientID %> " ).addClassName( " required max-length-100 " );
    $( " <%=txbName.ClientID %> " ).setAttribute( " advicePrefix " ,  " 标题 " );
    $( " <%=ddlSolution.ClientID %> " ).addClassName( " required " );
    $( " <%=ddlSolution.ClientID %> " ).setAttribute( " advicePrefix " ,  " 考评周期 " );
    $( " <%=txtLowScore.ClientID %> " ).addClassName( " required validate-float-range-0-10000 float-digit-2 " );
    $( " <%=txtLowScore.ClientID %> " ).setAttribute( " advicePrefix " ,  " 低份预警线 " );
    $( " <%=txtHighScore.ClientID %> " ).addClassName( " required validate-float-range-0-10000 float-digit-2 great-than-<%=txtLowScore.ClientID %> " );
    $( " <%=txtHighScore.ClientID %> " ).setAttribute( " advicePrefix " ,  " 高分预警线 " );
    $( " <%=txbDes.ClientID %> " ).addClassName( " max-length-500 " );
    $( " <%=txbDes.ClientID %> " ).setAttribute( " advicePrefix " ,  " 描述 " ); 

     if  (document.getElementById( " <%=gvRegionItem.ClientID %> " )  !=   null )
         if  (document.getElementById( " <%=gvRegionItem.ClientID %> " ).rows.length  <   2 ) {
        document.getElementById( " <%=lblErr.ClientID%> " ).innerText  =   " *没有区域考评规则，请添加 " ;
         return   false ;
    } 

     if  (valid.validate()) {
        valid.reset();
        subed  =   true ;
         return   true ;
    } 

     return   false ;
} 

 

 

留意到这里：

var valid = new Validation("divBaseInfo", { onSubmit: false, useTitles: false, immediate: false, stopOnFirst: true, validateAdvice: '<%=lblErr.ClientID %>' });

divBaseInfo表示验证的区域，只验证此区域的控件

onSubmit: false, useTitles: false, immediate: false, stopOnFirst: true, 和原来的一样，后面添加了一个参数validateAdvice: '<%=lblErr.ClientID %>' 表示显示错误信息的控件ID。

转载于:https://www.cnblogs.com/seamusic/archive/2009/01/20/1378771.html