Flex笔记_验证用户输入

内置验证器

  • Flex提供了很多内置的验证器,它们都是Validator类的子类。
  • Flex以扩展Validator类的方式创建了内置验证器,以用于满足常用需求。
  • Validator组件的重要属性和函数:
  1. enabled:Boolean类型,决定是否启用验证功能
  2. required:Boolean类型,是否必填
  3. requiredFieldError:String类型,设置显示给用户的消息
  4. source:Object,设置想要验证的对象(组件)
  5. property:String,设置想要验证的对象属性
  6. listener:Object,设置验证未通过时要突出显示的对象,默认为source所设定的对象
  7. valid:Function,验证通过回调函数
  8. invalid:Function,验证不通过回调函数
  9. trigger:Object,设置触发验证的对象,默认为source所设定的对象
  10. 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>

验证技巧

  • 验证器是否总是检查所有条件?

        不会,一旦验证失败,会立即停止验证。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逆向技术

PE格式第六讲,导出表

                PE格式第六讲,导出表 请注意,下方字数比较多,其实结构挺简单,但是你如果把博客内容弄明白了,对你受益匪浅,千万不要看到字...

1966
来自专栏CDA数据分析师

工具 | 很全的 Python 面试题

Python语言特性 1 Python的函数参数传递 看两个例子: ? 所有的变量都可以理解是内存中一个对象的“引用”,或者,也可以看似c中void*的感觉。 ...

1.3K9
来自专栏Android自学

【转】jQuery验证控件jquery.validate.js使用说明+中文API

3014
来自专栏Kirito的技术分享

JAVA 拾遗--Future 模式与 Promise 模式

写这篇文章的动机,是缘起于微信闲聊群的一场讨论,粗略整理下,主要涉及了以下几个具体的问题: 同步,异步,阻塞,非阻塞的关联及区别。 JAVA 中有 callb...

3K10
来自专栏影子

Java解析OFFICE(word,excel,powerpoint)以及PDF的实现方案及开发中的点滴分享

63716
来自专栏cmazxiaoma的架构师之路

【分布式架构之旅】Redis入门

2673
来自专栏大内老A

一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)

JSONP(JSON with Padding)可以看成是JSON的一种“使用模式”,用以解决“跨域访问”的问题,这篇简单的文章给出一个简单的例子用于模拟如何通...

2117
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(七):数据库字段的定义(上)

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

3686
来自专栏java一日一条

2015年Java开发岗位面试题归类

3. 说说你知道的几个Java集合类:list、set、queue、map实现类咯。。。

1011
来自专栏java达人

硬编码,常量,枚举类

假如有一笔业务需要审核,审核状态分:未审核,审核中,审核通过,审核不通过。我们在程序里是否可以直接这么写: if(state==1){//1代表未操作 //...

3726

扫码关注云+社区

领取腾讯云代金券