FLEX表单验证带重置功能<WEB用户体验>

有用的校验方法必须最低限度的也要支持富因特网应用程序的用户界面设计原则。

1．防患于未然，而不是事后责备。
校验错误的表单不应该被用户提交。防止，不责骂原则的意思是，能够准确无误的放置用户犯错误，那么就应该那么做，而不是允许他们犯错误，而事后责备他们。

当做客户端校验时，明显的违反这一原则的情况是，当用户已经提交完整个表单以后，校验用户的输入数据。在Flex应用程序中，你可以创建一个行为，触发校验器，相应表单上提交按钮的单击事件。

2．马上给出反馈
用户操作控件时应该能够得到即时的反馈。当控件值变为有效时，用户应该收到正确的反馈。当控件值变为无效时应该得到错误的反馈。当用户离开控件时给出用户反馈，也非凡上一条原则。

当控件没有给出用户即时反馈，用户只有在离开控件时才能发现错误。要更正错误，用户需要返回控件，因此会花费更多的努力。（这个例子也违反了另一个相关的原则：考虑用户的操作）。更重要的，当用户编一个一个校验错误的输入框的值，用户不知道是否用户的改变会使控件值生效。用户需要离开控件才能知道结果，并且如果依然不合法则需要返回控件继续改变它。

默认的Flex校验器的行为监听valueCommit事件。这导致行为描述就像刚才的那样，只有当用户离开控件以后才能收到反馈。为了给出即时反馈，你必须手工指定触发校验响应change事件，而不是valueCommit事件。

前边的的连个例子展示了没有即时反馈的客户体验。

3．让用户工作
虽然给出即时提示是好事情，你的应用程序在一定程度上，还应该做到不中断用户工作流程。漂浮提示框不中断用户，通常是最好的玄色。只有当完全必要的时候，才能够使用完全中断用户操作的模式对话窗口。

4．验证有罪之前，都是清白的
只有用户与控件交互以后，用户在校验失败后应该给出警告。（换句话说，初始状态，和初始化控件时不应该运行校验并显示校验信息。类似的，重置表单应该移除所有校验错误信息。

连接：设计web应用程序用户界面更多的信息，请查看Aral Balken的著作《User Interface Design Principles for Web Applications》

 

有用的客户端校验的例子

下边的例子示例了在Flex3中创建校验的最佳实践。它遵循了上文所述的4个用户界面设计的原则。用户在验证有罪之前是清白的,初始的表单上没有校验错误信息，当表单被清除。用户马上可以收到信息当控件值变得可用（给出即时反馈）并且放置用户提交一个错误表单（放置，不是时候责备）。校验错误信息显示为漂浮提示框并且这样可以在不中断用户操作的情况下引导用户填写正确的信息。

• 两个标志，formIsValid和formIsEmpty跟踪当前表单的状态。Submit按钮的enabled属性被绑定在 formIsValid标志，因此，放置用户提交无效的表单。类似的，绑定Clear form按钮的enabled属性到fromIsEmpty标志上，以便只有用户输入过信息之后此按钮才有效。
• focussedFormControl属性持有最后一个发送change事件的引用（换句话说，是用户当前所在的控件）。 validate()帮助方法使用这个属性来指定只显示当前控件的校验错误消息。这很重要，可以防止没有与用户交互的组件的错误信息显示出来。
• 当表单控件的值被改变时，validateForm()事件处理方法使用validate()帮助方法来校验所有的表单控件。只有当所有校验器校验成功，formIsValid标志的值被这是为true然后用户允许提交表单。
• resetFocus()方法调用FocusManager的setFocus方法来将焦点放置于表单的第一个元素。当表单被第一次载入和后来的当表单被用户清空时，resetFocus()方法被调用。将焦点至于第一个控件，可以节省用户的点击次数，。

注意：由于浏览器处理Flash内容的限制，用户必须在Flash应用程序上点击一次才能将焦点移入到Web页面的flash程序中。

• clearFormHandler方法清楚表单控件的值，并且也重置validator到恰当的状态。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	viewSourceURL="src/ValidationUsable/index.html"
	width="500" height="250" 
	defaultButton="{submitButton}"
	creationComplete="creationCompleteHandler();"
	>
	<mx:Script>
		<![CDATA[
			import mx.validators.Validator;
			import mx.events.ValidationResultEvent;
			import mx.controls.Alert;
			//表单是否有效
			[Bindable]
			public var formIsValid:Boolean = false;
			//表单是否为空
			[Bindable]
			public var formIsEmpty:Boolean = true;
			
			//持有该目前集中控制的对象。
			private var focussedFormControl:DisplayObject;
			
			/**
			 * 验证表单方法
			 * */
			private function validateForm(event:Event):void 
			{                    
				//检查验证传递和返回一个布尔值相应。
				//保存引用当前集中表单控件
				//这样isValid()辅助方法可以只通知
				//当前集中形式控制和不影响
				//任何其他的表单控件。
				focussedFormControl = event.target as DisplayObject;  
				
				// 标记表单有效的开始                
				formIsValid = true;          
				
				// 检查表单是否为空
				formIsEmpty = (nameInput.text == "" && emailInput.text == ""
					&& phoneInput.text == "");
				
				//运行每个验证器反过来,使用isValid()
				//辅助方法和更新formIsValid的价值
				//因此。
				validate(nameValidator);                
				validate(phoneValidator);
				validate(emailValidator);
			}
			
			/**
			 * 验证方法
			 * */
			private function validate(validator:Validator):Boolean
			{                
				//得到验证对象
				var validatorSource:DisplayObject = validator.source as DisplayObject;
				
				//镇压事件如果当前控制被验证的不是
				//当前集中控制的形式。这阻止了用户
				//从接收视觉验证提示在其他表单控件。
				var suppressEvents:Boolean = (validatorSource != focussedFormControl);
				
				//执行验证。返回一个ValidationResultEvent。
				//传递null作为第一个参数使验证器
				//使用属性中定义的属性的标记
				// < mx:Validator >标记。
				var event:ValidationResultEvent = validator.validate(null, suppressEvents); 
				
				//检查验证传递和返回一个布尔值。
				var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);
				
				// 修改验证标记
				formIsValid = formIsValid && currentControlIsValid;
				
				return currentControlIsValid;
			}
			
			/**
			*组件构件完成事件
			 * */
			private function creationCompleteHandler():void
			{
				// 初始化定焦点为第一个控件上
				resetFocus(); 
			}
			
			/**
			 * 表单提交
			 * */
			private function submitForm():void 
			{
				Alert.show("提交"); 
			}
			
			/**
			 *  清除验证信息 重置功能
			 * */
			private function clearFormHandler():void
			{
				// 清除所有的值
				nameInput.text = "";
				phoneInput.text = "";
				emailInput.text = "";
				
				// 清除错误信息
				nameInput.errorString = "";
				phoneInput.errorString = "";
				emailInput.errorString = "";
				
				// 标记为清空
				formIsEmpty = true;
				
				// 获取到焦点
				resetFocus();               
			}
			
			// 设置第一个控件获取到焦点
			private function resetFocus():void
			{
				focusManager.setFocus(nameInput);
			}
		]]>
	</mx:Script>
	
	<!-- 
	Validators 
	-->
	
	<!-- Name must be longer than 2 characters long -->
	<mx:StringValidator 
		id="nameValidator"
		source="{nameInput}" 
		property="text"
		minLength="2"
		/>
	
	<!-- Validate phone number -->
	<mx:PhoneNumberValidator 
		id="phoneValidator"
		source="{phoneInput}" property="text"
		/>
	
	<!-- Validate email -->
	<mx:EmailValidator
		id="emailValidator"
		source="{emailInput}" property="text"
		/>
	
	<!-- 
	User interface 
	-->
	<mx:Panel title="Phone number validator">        
		<mx:Form>
			<mx:FormItem label="Name:">
				<mx:TextInput 
					id="nameInput"
					change="validateForm(event);"
					/>
			</mx:FormItem>
			<mx:FormItem label="Phone: ">
				<mx:TextInput 
					id="phoneInput"
					change="validateForm(event);"
					/>
			</mx:FormItem>
			<mx:FormItem label="Email: ">
				<mx:TextInput 
					id="emailInput"
					change="validateForm(event);"
					/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar horizontalAlign="center">
			<mx:Button 
				id="submitButton"
				label="Submit" 
				enabled="{formIsValid}"
				/>
			<mx:Button 
				label="Clear form" 
				enabled="{!formIsEmpty}"
				click="clearFormHandler();"
				/>
		</mx:ControlBar>
	</mx:Panel>
	
</mx:Application>