Flex笔记_验证用户输入

最新推荐文章于 2024-12-10 00:04:01 发布

weixin_33743880

最新推荐文章于 2024-12-10 00:04:01 发布

阅读量160

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/xuleo/blog/308316

本文详细介绍了Flex框架中各种内置验证器的使用方法及其属性设置，包括字符串、数字、日期等多种类型的验证，并提供了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

内置验证器

Flex提供了很多内置的验证器，它们都是Validator类的子类。
Flex以扩展Validator类的方式创建了内置验证器，以用于满足常用需求。
Validator组件的重要属性和函数：

enabled：Boolean类型，决定是否启用验证功能
required：Boolean类型，是否必填
requiredFieldError：String类型，设置显示给用户的消息
source:Object，设置想要验证的对象（组件）
property：String，设置想要验证的对象属性
listener：Object，设置验证未通过时要突出显示的对象，默认为source所设定的对象
valid：Function，验证通过回调函数
invalid：Function，验证不通过回调函数
trigger：Object，设置触发验证的对象，默认为source所设定的对象
triggerEvent：String，设置触发验证的事件，默认为valueCommit事件

Validator

Validator是所有验证器的父类，其主要用途是作为其他派生类的模板。
唯一的能力是检查用户是否为所针对的空间提供了值。
只能执行简单的Boolean检查。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:Validator source="{username}" property="text" required="true"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="Enter your name:"/>
		<s:TextInput id="username"/>
		<s:TextInput/>
	</s:VGroup>
</s:Application>

StringVAlidator

具有检查String是否过长或过短的能力。
属性：minLength、tooShortError、maxLength、tooLongError。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:StringValidator property="text"
							source="{username}"
							minLength="3" maxLength="20"
							trigger="{submitButton}" triggerEvent="click"
							tooLongError="too long , longer than 20"
							tooShortError="too short, shoter than 3"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="Enter your name:"/>
		<s:TextInput id="username"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

NumberValidator

验证输入值是否过大或过小。
限制输入为整数或非负数。
自动识别千分位。
考虑到国际化需要，提供thousandsSeparator和decimalSeparator属性。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:NumberValidator source="{age}" property="text" allowNegative="false"
							negativeError="not allow negative"
							maxValue="110" minValue="5" domain="int"
							trigger="{submitButton}" triggerEvent="click"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="Enter your age:"/>
		<s:TextInput id="age"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

DateValidator

确保用户输入有效的日期数据。
能够接受三个独立的输入控件，分别保存了年、月、日；也可以使用一个标准的源，保存的值应该是mm/dd/yy这种格式；也可以使用一组字段，分别捕获日期的各个部分，然后配置dateValidator来理解每个字段分别代表日期的哪一个部分。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	<mx:DateValidator
			monthSource="{month}" monthProperty="value"
			daySource="{day}" dayProperty="value"
			yearSource="{year}" yearProperty="text"
			trigger="{submitButton}" triggerEvent="click"/>
	</fx:Declarations>
	<s:HGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="Month:"/>
		<s:NumericStepper id="month"/>
		<s:Label text="Day:"/>
		<s:NumericStepper id="day"/>
		<s:Label text="Year:"/>
		<s:TextInput id="year" width="60"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:HGroup>
</s:Application>

EmailValidator

不仅能够验证电子邮件地址中是否包含@，同样能检查域名后缀是否合理。
唯一可以自行配置的属性是错误消息。
检查电子邮件地址是否有效：不包含空格，特殊字符，不缺少字符，等等。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	<mx:EmailValidator source="{email}" property="text"
					   invalidCharError="you've got some funky characters"
					   trigger="{submitButton}" triggerEvent="click"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="Email:"/>
		<s:TextInput id="email"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

CreditCardValidator

使用Luhn mod10 算法（用于验证数字和简单校验的公式）检查用户输入的号码和信用卡类型是否匹配。
需要提供两个输入：

信用卡类型（品牌），信用卡号码。

主要用于检查格式化字符、数字（没有提供数字，提供的数字无效）和类型。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	<mx:CreditCardValidator cardNumberSource="{cardNumber}"
							cardNumberProperty="text"
							cardTypeSource="{cardType}"
							cardTypeProperty="selectedItem"
							trigger="{submitButton}"
							triggerEvent="click"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:DropDownList id="cardType" width="150">
			<mx:ArrayCollection>
				<fx:String>American Express</fx:String>
				<fx:String>Visa</fx:String>
				<fx:String>Diners Club</fx:String>
				<fx:String>Discover</fx:String>
				<fx:String>MasterCard</fx:String>
			</mx:ArrayCollection>
		</s:DropDownList>
		<s:Label text="Card Number:"/>
		<s:TextInput id="cardNumber"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

CurrencyValidator

适用于面向国际市场开发的程序。
同NumberValidator很相似，能够检查小数点精度、最小值和最大值以及小数点分隔符等。
可以理解货币符号和位置。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	<mx:CurrencyValidator source="{income}" property="text"
						  allowNegative="false"
						  negativeError="dont support negative income..."
						  precision="2" precisionError="support 2 decimals only."
						  trigger="{submitButton}" triggerEvent="click"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="How much do you make?"/>
		<s:TextInput id="income"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

PhoneNumberValidator

能够识别国际电话号码，也能够识别北美各地电话号码。
电话号码至少必须包含10位数，电话号码中包含的格式化字符必须有效（默认情况下使用短划线、加号和圆括号）。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:PhoneNumberValidator source="{phone}" property="text"
								 trigger="{submitButton}" triggerEvent="click"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="What number can we reach you at?"/>
		<s:TextInput id="phone"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

RegExpValidator

将用户输入的值域正则表达式做比较。
通过使用expression和可选的RegExflags（可以用来忽略大小写，执行全局搜索等），可以定义要匹配的模式。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:RegExpValidator source="{ssn}" property="text"
							flags="gmi"
							expression="\d\{3\}.\d\{2\}.\d\{4\}"
							noMatchError="Your SSN is unrecognized."
							trigger="{submitButton}"
							triggerEvent="click"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="Social Security Number:"/>
		<s:TextInput id="ssn"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

注意：正则表达式的工作原理是模式匹配，而非验证。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.events.ValidationResultEvent;
			import mx.validators.RegExpValidationResult;
			import mx.controls.Alert;
			private function handleValidation(event:ValidationResultEvent):void {
				var oneResult:RegExpValidationResult;
				for(var i:int = 0; i < event.results.length; i++) {
					oneResult = event.results[i];
					Alert.show("Found a match at Index:" + oneResult.matchedIndex
						+ "\n On character of : " + oneResult.matchedString, "RegEx Results",
						Alert.NONMODAL);
				}
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:RegExpValidator source="{test}" property="text"
							flags="gmi"
							valid="handleValidation(event)"
							expression="m[ai]n"
							noMatchError="I don't like it!"
							trigger="{submitButton}"
							triggerEvent="click"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="Try me:"/>
		<s:TextInput id="test"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

SocialSecurityValidator

ZipCodeValidator

实时验证

在错误发生时，就捕获错误。
必需监视change事件。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:StringValidator source="{address}"
							minLength="5"
							property="text"
							trigger="{address}"
							triggerEvent="change"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="What your address:"/>
		<s:TextInput id="address"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

提交值验证

在用户提交输入值时验证。用户提交值的标志包括按下Tab键、回车键、方向键或鼠标单击其它组件。
triggerEvent取值为valueCommit。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:StringValidator source="{address}"
							minLength="5"
							property="text"
							trigger="{address}"
							triggerEvent="valueCommit"/>
	</fx:Declarations>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="What your address:"/>
		<s:TextInput id="address"/>
		<s:Button label="Submit" id="submitButton"/>
	</s:VGroup>
</s:Application>

通过性验证

填写完整个表单之后，在提交之前一并验证。
把trigger属性都设置成提交按钮对象，triggerEvent都设置为同一事件。

脚本式验证

可以在任何时候都验证用户输入的值。
重用同一个验证器验证多个值时，可以使用相应的ActionScript版本。
要验证的值不一定来自用户输入控件，也可以是其它的值。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.ValidationResultEvent;
			import mx.validators.EmailValidator;
			import mx.validators.StringValidator;
			public var emailVal:EmailValidator = new EmailValidator();
			public var stringVal:StringValidator = new StringValidator();
			public function validateForm():void {
				var valResult:ValidationResultEvent;
				stringVal.source = username;
				stringVal.property = "text";
				stringVal.minLength = 6;
				emailVal.source = email;
				emailVal.property = "text";
				valResult = emailVal.validate();
				if(valResult.type == "invalid") {
					Alert.show("Please fix your email address:");
				} else {
					valResult = stringVal.validate();
					if(valResult.type == "invalid") {
						Alert.show("Please fix your Username.");
					}
				}
			}
		]]>
	</fx:Script>
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="Email :"/>
		<s:TextInput id="email"/>
		<s:Label text="Your name:"/>
		<s:TextInput id="username"/>
		<s:Button label="Submit" id="submitButton"
				  click="validateForm()"/>
	</s:VGroup>
</s:Application>