使用Validator改进数据向导生成的Flex应用

本文转载自： http://www.riafan.com/article/flex/enhance-flex-app-with-validator.html 

 

对于一个Flex CRUD应用来说，新增更新记录前进行数据验证是必要的，这回我们将讲解怎样使用Validator改进数据向导生成的Flex应用。

点击此处查看该实例的效果，点击此处下载该实例的源码。

对于所有的验证器来说，一般都会设定source和property两个属性。我们可以通过验证器属性方便地自定义出错信息甚至国际化，这里就不再讲述。

先看新增记录，打开源文件Student.mxml。

1) 为“学号”输入文本增添了一个正则表达式验证器(RegExpValidator)，正则表达式验证器的关键在于设置expression属性，通过正则表达式我们可以完成类似字符串验证器(StringValidator)、日期验证器(DateValidator)等验证器的功能。从这个意义上讲，正则表达式验证器的功能是最强大的，不过没其它特定的验证器使用起来方便。比如说此实例中的正则表达式^[WS]\d-\d\{6}$中，我们不得不对“{”进行了转义，如果是使用ActionScrip来写表达式，“\”也需要转义，大家在使用时要注意这一点。

2) 为“姓名”输入文本增添了一个字符串验证器。

3) 为“生日”DateField创建了一个日期验证器。日期验证器是最复杂的一个验证器，它最重要的一个属性是inputFormat，由于在输入格式中我们用到了特殊字符，因此我们不得不在allowedFormatChars属性中显示地声明。一般来说，验证器会放在主程序中，还可以放在了自定义组件中(如DateFieldEx.mxml)，效果是一样的。

4) 默认情况下，当验证器失去焦点时，就会对该控件进行校验，然而点击新增按钮仍可以提交数据，这不是我们想要的。此处我们在insertItem回调函数中使用validateAll静态方法对所有的验证对外进行校验，从而保证了提交数据前数据的有效性。

再来看修改记录，打开源文件StudentScript.as，注意如下代码片段：

private function editCellEnd(e:DataGridEvent):void
{
    var dsRowIndex:int = e.rowIndex;
    var dsFieldName:String = e.dataField;
    var dsColumnIndex:Number = e.columnIndex;
    var col:DataGridColumn = dataGrid.columns[dsColumnIndex];
    if(col.dataField == "Name")
    {
    	 var editor:TextInput = dataGrid.itemEditorInstance as TextInput;
   		 if(editor.text.length == 0)
   		 {
   		 	editor.errorString = nameValidator.requiredFieldError;
   		 	e.preventDefault();
   		 }
    }
    else if(col.dataField == "Birthday")
    {
		 var df:DateFieldEx = dataGrid.itemEditorInstance as DateFieldEx;
	   	 if(df.validator.validate().type == ValidationResultEvent.INVALID)
	   	 {
	   	 	e.preventDefault();
	   	 }
    }
}

1) 对于DataGrid来说，在编辑单元格时，校验项目编辑器一般会在校验失败时，在itemEditEnd事件处理方法中执行preventDefault方法来阻止关闭项目编辑器，不然是看不到校验效果的。

2) 除了使用验证器属性,我们还可以设置验证对象(UIComponent)的errorString属性来显示验证出错信息。

3) 另外，在编辑单元格时，无法执行这类服务器端验证。如果要执行这类验证，那么当您的应用程序启动时，您应当向服务器查询要验证的数据，并在编辑单元格时使用它。