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

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

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

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

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

1) 为“学号”输入文本增添了一个正则表达式验证器(RegExpValidator),正则表达式验证器的关键在于设置e­xpression属性,通过正则表达式我们可以完成类似字符串验证器(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) 另外,在编辑单元格时,无法执行这类服务器端验证。如果要执行这类验证,那么当您的应用程序启动时,您应当向服务器查询要验证的数据,并在编辑单元格时使用它。

发表评论