表格验证

最新推荐文章于 2022-11-08 15:43:24 发布

原创最新推荐文章于 2022-11-08 15:43:24 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Adobe #XML #Blog

flex 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用 Flex 的 DataGrid 组件并实现数据验证的示例。该示例通过创建一个包含数字、非空字段和任意字段的 DataGrid，并在编辑结束时进行数据验证，确保非空字段不为空且数字字段确实为数字。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
  import mx.collections.ArrayCollection;
  import mx.utils.StringUtil;
  import mx.controls.TextInput;
  import mx.events.DataGridEventReason;
  import mx.events.DataGridEvent;

  [Bindable]
  private var list:ArrayCollection = new ArrayCollection();
  //初始化方法
  private function init():void{
   for(var i:int = 0;i < 10;i++){
    var o:Object;
    if(i%2 ==0)
     o = {num:i,notNull:"非空的第"+i+"行内容",any:"任意的第"+i+"行内容"};
    else
     o = {num:i,notNull:"非空的第"+i+"行内容",any:i};
    list.addItem(o);
   }
  }
  //验证的操作方法
  private function validateItem(event:DataGridEvent):void{
   //如果没有更新数据则直接返回
   if (event.reason == DataGridEventReason.CANCELLED){
      return;
      }
      var input:TextInput = TextInput(_Grid.itemEditorInstance);
      var newData:String= TextInput(event.currentTarget.itemEditorInstance).text;
      //如果商品查询的输入则验证非空
      if(event.dataField == "notNull" && StringUtil.trim(newData).length<=0){
      event.preventDefault();
          input.errorString="不能为空！";
      }
      //如果是数量则验证必须为数字
      if(event.dataField == "num" && isNaN(Number(StringUtil.trim(newData)))){
        event.preventDefault();
          input.errorString="数字必须为数字！";
          return;
      }
  }
]]>
</mx:Script>
<mx:DataGrid id="_Grid" y="0" width="100%" x="0" height="100%" itemEditEnd="validateItem(event)" dataProvider="{list}" textAlign="center" editable="true" fontSize="12">
  <mx:columns>
   <mx:DataGridColumn headerText="数字" dataField="num"/>
   <mx:DataGridColumn headerText="非空" dataField="notNull"/>
   <mx:DataGridColumn headerText="任意" dataField="any"/>
  </mx:columns>
</mx:DataGrid>
</mx:Application>

http://xiejiangbo.iteye.com/blog/528174

private function validateItem(event:DataGridEvent):void {
//如果没有更新数据则直接返回
if(event.reason == DataGridEventReason.CANCELLED)return;
var input:TextInput = TextInput(testDG.itemEditorInstance);
var newData:String= TextInput(event.currentTarget.itemEditorInstance).text;
switch(event.dataField){
case 'BH':
if(StringUtil.trim(newData).length <=0){
event.preventDefault();
input.errorString="不能为空！";
}
break;
}
}

<mx:DataGrid id="testDG" dataProvider="{testData}" top="38" left="10" right="10" bottom="40" editable="true" alternatingItemColors="[#CCCCCC,#AAAAAA]" itemEditEnd="validateItem(event)">
<mx:columns>
<mx:DataGridColumn dataField="BH" headerText="编号" width="100"/>
<mx:DataGridColumn dataField="MC" headerText="名称"/>
</mx:columns>
</mx:DataGrid>