JData 使用教程（四） 对输入数据进行验证（客户端验证）

JData 使用教程（四） 对输入数据进行验证（客户端验证）

绝大多数情况下，我们都需要对所输入的数据进行验证，而验证又可分为客户端验证和服务端验证。现在先来讲一下如何进行客户端验证。

我们先来看一下效果图。

 

代码如下：

 

代码

   
     

    
      
    
       Sys.onReady(
    
      function
    
      () {

 
    
      var
    
       dataSource 
    
      =
    
       
    
      new
    
       JData.WebServiceDataSource(
    
      "
    
      ../Services/NorthwindService.asmx
    
      "
    
      , 
    
      "
    
      GetOrders
    
      "
    
      , 
    
      null
    
      , 
    
      "
    
      UpdateOrder
    
      "
    
      );
 
    
      var
    
       col1 
    
      =
    
       
    
      new
    
       JData.BoundField(
    
      '
    
      OrderID
    
      '
    
      , 
    
      null
    
      , 
    
      '
    
      100px
    
      '
    
      , 
    
      null
    
      , 
    
      true
    
      );
 
    
      var
    
       col3 
    
      =
    
       
    
      new
    
       JData.BoundField(
    
      '
    
      Freight
    
      '
    
      , 
    
      null
    
      , 
    
      '
    
      100px
    
      '
    
      , 
    
      '
    
      92px
    
      '
    
      );
 
    
      var
    
       col4 
    
      =
    
       
    
      new
    
       JData.BoundField(
    
      '
    
      ShipName
    
      '
    
      , 
    
      null
    
      , 
    
      '
    
      180px
    
      '
    
      , 
    
      '
    
      172px
    
      '
    
      );
 
    
      var
    
       col5 
    
      =
    
       
    
      new
    
       JData.CommandField();
 col5.get_itemStyle().set_width(
    
      '
    
      90px
    
      '
    
      );
 col5.set_showEditButton(
    
      true
    
      );
 col5.set_showCancleButton(
    
      true
    
      );

 
    
      var
    
       validator1 
    
      =
    
       
    
      new
    
       JData.RangeValidator();
 validator1.set_minimumValue(
    
      20
    
      );
 validator1.set_maximumValue(
    
      80
    
      );
 col3.set_validators([validator1]);

 
    
      var
    
       gridView 
    
      =
    
       
    
      new
    
       JData.GridView($get(
    
      '
    
      gridView
    
      '
    
      ));
 gridView.set_dataSource(dataSource);
 gridView.set_columns([col1, col3, col4, col5]);
 gridView.set_allowPaging(
    
      true
    
      );
 gridView.set_caption(
    
      '
    
      Validate Data On Client Side
    
      '
    
      );
 JData.JQueryUIStyle(gridView);
 gridView.initialize();
 });　　
   
     

 

 

我们需要注意的代码是：

 

 

  
    

   
     
   
      
   
     var
   
      validator1 
   
     =
   
      
   
     new
   
      JData.RangeValidator();
 validator1.set_minimumValue(
   
     20
   
     );
 validator1.set_maximumValue(
   
     80
   
     );
 col3.set_validators([validator1]);
  
    

 

 

在这段代码中，首先创建一个 JData.RangeValidator ，然后把它添加到一个列中，用来验证该列的数据。

目前 JData 验证类仅有两个，分别为 JData.RangeValidator 和 JData.RequiredFieldValidator ，当然，后续版本将会添加更多的验证类。

演示以及完整代码请访问 http://jdata.alinq.org