How to validate radio buttons

最新推荐文章于 2021-06-20 22:24:22 发布

转载最新推荐文章于 2021-06-20 22:24:22 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ifshe/archive/2011/07/04/2097520.html

本文介绍如何在Flex中实现RadioButton的选择验证，通过自定义RadioButtonGroupValidator类确保至少选择了一个选项，并展示了具体的MXML代码实例。

[source adress]http://cookbooks.adobe.com/post_How_to_validate_radio_buttons_2-5962.html?w=rel

Problem

Flex offers great supports for data entry validation of controls like TextInput but for other controls like radio buttons or combo-boxes, you need to add a bit more. This entry shows how to validate radio buttons, i.e. to ensure that one radio button from a group is selected.

Solution

Standard Validators support radio buttons validation just fine but there is no built-in way to visually inform user that the validation failed (red border, error tooltips etc.) To do this write your own RadioButtonGroupValidator-Class

Detailed explanation

Here is a rough outline of what you need to do in order to validate radio buttons (full example will follow):

1. Create radio buttons normally (together with RadioButtonGroup).
2. Create a RadioButtonGroupValidator and validate RadioButtonGroup's selectedValue property every time it changes.

Put together, the example should look something like this

Application

View Code

1 <? xml version="1.0" encoding="utf-8" ?> < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" xmlns:validators ="de.ham.devas.validators.*" layout ="vertical" horizontalAlign ="center" verticalAlign ="top" > < mx:Script > <![CDATA[ import mx.controls.Alert; import mx.events.ValidationResultEvent; import mx.events.ItemClickEvent; private function onSubmit():void { var validResults:ValidationResultEvent = vRG.validate(); if (validResults.type == ValidationResultEvent.INVALID) { lbMsg.text = "Error!"; } else { lbMsg.text = "OK"; } } private function onReset():void { vRG.enabled = false; rbg.selection = null; vRG.enabled = true; lbMsg.text = ""; } ]]> </ mx:Script > < validators:RadioButtonGroupValidator id ="vRG" source =" {rbg} " property ="selectedValue" required ="true" /> < mx:Panel label ="RadioButtonGroup validation" width ="200" paddingLeft ="10" paddingRight ="10" > < mx:RadioButtonGroup id ="rbg" /> < mx:RadioButton groupName ="rbg" value ="flex15" label ="Flex 1.5" /> < mx:RadioButton groupName ="rbg" value ="flex2" label ="Flex 2" /> < mx:RadioButton groupName ="rbg" value ="flex3" label ="Flex 3" /> < mx:Label id ="lbMsg" /> < mx:ControlBar > < mx:Button label ="Submit" click ="onSubmit()" /> < mx:Button label ="Reset" click ="onReset();" /> </ mx:ControlBar > </ mx:Panel > </ mx:Application >

Validator

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"	xmlns:validators="de.ham.devas.validators.*"	layout="vertical" horizontalAlign="center" verticalAlign="top">		<mx:Script>		<![CDATA[			import mx.controls.Alert;			import mx.events.ValidationResultEvent;			import mx.events.ItemClickEvent;									private function onSubmit():void {				var validResults:ValidationResultEvent = vRG.validate();				if (validResults.type == ValidationResultEvent.INVALID) {					lbMsg.text = "Error!";				} else {					lbMsg.text = "OK";				}			}						private function onReset():void {				vRG.enabled = false;				rbg.selection = null;				vRG.enabled  = true;				lbMsg.text = "";			}					]]>	</mx:Script>		<validators:RadioButtonGroupValidator id="vRG"		source="{rbg}" property="selectedValue" required="true" />		<mx:Panel label="RadioButtonGroup validation" width="200" paddingLeft="10" paddingRight="10">		<mx:RadioButtonGroup id="rbg" />		<mx:RadioButton groupName="rbg" value="flex15" label="Flex 1.5" />		<mx:RadioButton groupName="rbg" value="flex2" label="Flex 2" />		<mx:RadioButton groupName="rbg" value="flex3" label="Flex 3" />				<mx:Label id="lbMsg" />				<mx:ControlBar>			<mx:Button label="Submit" click="onSubmit()" />			<mx:Button label="Reset" click="onReset();" />			</mx:ControlBar>	</mx:Panel>	</mx:Application>

转载于:https://www.cnblogs.com/ifshe/archive/2011/07/04/2097520.html