使用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 == & quot; Name & quot;) {
    var editor: TextInput = dataGrid.itemEditorInstance as TextInput;
    if (editor.text.length == 0) {
      editor.errorString = nameValidator.requiredFieldError;
      e.preventDefault();
    }
  } else if (col.dataField == & quot; Birthday & quot;) {
    var df: DateFieldEx = dataGrid.itemEditorInstance as DateFieldEx;
    if (df.validator.validate().type == ValidationResultEvent.INVALID) {
      e.preventDefault();
    }
  }
}
  • 对于DataGrid来说,在编辑单元格时,校验项目编辑器一般会在校验失败时,在itemEditEnd事件处理方法中执行preventDefault方法来阻止关闭项目编辑器,不然是看不到校验效果的。
  • 除了使用验证器属性,我们还可以设置验证对象(UIComponent)的errorString属性来显示验证出错信息。
  • 另外,在编辑单元格时,无法执行这类服务器端验证。如果要执行这类验证,那么当您的应用程序启动时,您应当向服务器查询要验证的数据,并在编辑单元格时使用它。

发表评论

电子邮件地址不会被公开。 必填项已用*标注