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

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

我们先来看一下效果图。

 

代码如下：

 

代码

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://www.jsdata.org