jsData 使用教程(四) 对输入数据进行验证(客户端验证)
2010-06-28 15:45 麦舒 阅读(1596) 评论(4) 编辑 收藏 举报绝大多数情况下,我们都需要对所输入的数据进行验证,而验证又可分为客户端验证和服务端验证。现在先来讲一下如何进行客户端验证。
我们先来看一下效果图。
代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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 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]);
validator1.set_minimumValue(20);
validator1.set_maximumValue(80);
col3.set_validators([validator1]);
在这段代码中,首先创建一个 JData.RangeValidator ,然后把它添加到一个列中,用来验证该列的数据。
目前 JData 验证类仅有两个,分别为 JData.RangeValidator 和 JData.RequiredFieldValidator ,当然,后续版本将会添加更多的验证类。
演示以及完整代码请访问 http://www.jsdata.org