码迷,mamicode.com
首页 > 其他好文 > 详细

Flex笔记_验证用户输入

时间:2014-08-30 16:31:30      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:style   http   os   使用   io   strong   ar   for   数据   

内置验证器

  • 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>



验证技巧

  • 验证器是否总是检查所有条件?
        不会,一旦验证失败,会立即停止验证。


Flex笔记_验证用户输入

标签:style   http   os   使用   io   strong   ar   for   数据   

原文地址:http://my.oschina.net/xuleo/blog/308316

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!