首页 > 设计 > WEB开发 > 正文

15.5.如何去验证多个Combo Box及Radio Button组件

2023-07-15 16:37:29
字体:
来源:转载
供稿:网友
15.5.1 问题
如何去为多个radio button 及combo box 组件加入验证功能, 以确保最少其中一个项目会被选取?
15.5.2 解决办法
可以使用NumberValidator 去检查radio button 组件, 再使用一个自定义的Validator 去验证combo box 组件。
15.5.3 讨论
如果要从radio button 组件群中返回一个ValidationResultEvent 事件, 我们可以使用NumberValidator 去检查RadioButtonGroup 的selectedIndex 属性是否为”-1”。如果为”-1”的话,即代表radio button 中没有任何一项被选取了。而对于combo box 组件, 则可以创建一个自定义的validator, 用来检查ComboBox 的selectedItem 属性是否也空, 而被选取的项目又是否有效。
以下有关ComboBox 中自定义的validator 的代码会比较容易理解, 并且已加入注释:
代码如下:
+展开
-ActionScript
package oreilly.cookbook
{
import mx.validators.ValidationResult;
import mx.validators.Validator;
public class ComboValidator extends Validator
{
// 如果ComboBox中没有项目被选中, 则返回这个错误信息
public var error:String;
//如果开发者把一个自定义的项目推进ComboBox的数组中(这种情况我见过不少)
//我们就会把这个项跟已选取的项进行对比。
public var prompt:String;
public function ComboValidator() {
super();
}
//在这里我们进行两个检查:
//1. comboBox中有没有项目被选中
//2. 开发者有没有为comboBox加入自定义的项目
//任何一个条件为ture的话, 则返回一个错误
override protected function doValidation(value:Object):Array
{
var results:Array = [];
if(value as String == prompt || value == null) {
var res:ValidationResult = new ValidationResult(true"""", error);
results.push(res);
}
return results;
}
}
}

还有一种更方便地进行复数验证的方法, 那就是使用数组。首先, 我们要把所有需要组件中的validator 都加入到一个数组中, 然后使用public static Validator.validateAll 去存取数组中的所有validator。这种方法对于需要进行复数属性的验证时是十分有用的。假如任何一个validator 返回错误, 这些错误会被收集并在Alert 控件中显示出来:
代码如下
+展开
-XML
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxmlwidth="600height="400xmlns:cookbook="oreilly.cookbook.*creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
import mx.controls.Alert;
[Bindable]
private var validatorArr:Array;
//建立一个包含所有validator的数组, 我们将会以一个方法对其进行检查
private function init():void {
validatorArr = new Array();
//push all the validators into the same array
validatorArr.push(rbgValidator);
validatorArr.push(toggleValidator);
validatorArr.push(comboValidator);
}
//对所有validator数组中的项目进行验证。如果有任何错误的话, 则会发出一个警告。
private function validateForm():void {
// the validate all method will validate all the
Validators in an array
//passed to the validateAll method
var validatorErrorArray:Array =
Validator.validateAll(validatorArr);;
var isValidForm:Boolean = validatorErrorArray.length == 0;
if (!isValidForm) {
var err:ValidationResultEvent;
var errorMessageArray:Array = [];
for each (err in validatorErrorArray) {
errorMessageArray.push(err.message);
}
Alert.show(errorMessageArray.join("/n"),"Invalid form...", Alert.OK);
}
}

]]>
</mx:Script>
<mx:StringValidator id="rbgValidatorsource="{rbg}"
property="selectedValue"/>

<mx:NumberValidator id="toggleValidatorsource="{toggleButton}"
property="selectedIndexallowNegative="false"
negativeError="Please select a Radio Button"/>

<cookbook:ComboValidator id="comboValidatorerror="Please
Select A State
prompt="{stateCB.prompt}"
source="{stateCB}property="selectedItem"/>

<mx:Form id="form">
<mx:FormItem>
<mx:ComboBox id="stateCBdataProvider="{someDataProvider}"
prompt="Select AState"/>

</mx:FormItem>
<mx:FormItem>
<mx:RadioButtonGroup id="rbg"/>
<mx:RadioButton group="{rbg}label="firstid="first"/>
<mx:RadioButton group="{rbg}id="secondlabel="second"/>
<mx:RadioButton id="thirdlabel="thirdgroup="{rbg}"/>
</mx:FormItem>
<mx:FormItem>
<mx:ToggleButtonBar id="toggleButton">
<mx:dataProvider>
<mx:Array>
<mx:String> First Option </mx:String>
<mx:String> Second Option </mx:String>
<mx:String> Third Option </mx:String>
<mx:String> Fourth Option </mx:String>
<mx:String> Fifth Option </mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:FormItem>
</mx:Form>
<mx:Button label="validateclick="validateForm()"/>
</mx:VBox>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表