客服端校验的最佳实践
Flex提供几种数据校验的方式。这个快速入门介绍了一个提供最佳客户体验的数据校验方法。
有用的校验方法必须最低限度的也要支持富因特网应用程序的用户界面设计原则。
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;
???
??????????? // Holds a reference to the currently focussed
??????????? // control on the form.
??????????? private var focussedFormControl:DisplayObject;
?????????????????????????????????
??????????? // Validate the form
??????????? private function validateForm(event:Event):void
??????????? {???????????????????
??????????????? // Save a reference to the currently focussed form control
??????????????? // so that the isValid() helper method can notify only
??????????????? // the currently focussed form control and not affect
??????????????? // any of the other form controls.
??????????????? focussedFormControl = event.target as DisplayObject;???????????????? // Mark the form as valid to start with???????????????
??????????????? formIsValid = true;???????????????????????? // Check if form is empty
??????????????? formIsEmpty = (nameInput.text == "" && emailInput.text == ""
??????????????????? && phoneInput.text == "");??????????????? // Run each validator in turn,using the isValid()
??????????????? // helper method and update the value of formIsValid
??????????????? // accordingly.
??????????????? validate(nameValidator);???????????????
??????????????? validate(phoneValidator);
??????????????? validate(emailValidator);
??????????? }
????
???????????? // Helper method. Performs validation on a passed Validator instance.
???????????? // Validator is the base class of all Flex validation classes so
???????????? // you can pass any validation class to this method.
???????????? private function validate(validator:Validator):Boolean
???????????? {???????????????
??????????????? // Get a reference to the component that is the
??????????????? // source of the validator.
???????????????? var validatorSource:DisplayObject = validator.source as DisplayObject;
???????????????
??????????????? // Suppress events if the current control being validated is not
??????????????? // the currently focussed control on the form. This stops the user
??????????????? // from receiving visual validation cues on other form controls.
??????????????? var suppressEvents:Boolean = (validatorSource != focussedFormControl);
???????????????
??????????????? // Carry out validation. Returns a ValidationResultEvent.
??????????????? // Passing null for the first parameter makes the validator
??????????????? // use the property defined in the property tag of the
??????????????? // <mx:Validator> tag.
??????????????? var event:ValidationResultEvent = validator.validate(null,suppressEvents);
???????????????????????????????
??????????????? // Check if validation passed and return a boolean value accordingly.
???????????????? var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);
????????????????
???????????????? // Update the formIsValid flag
???????????????? formIsValid = formIsValid && currentControlIsValid;
????????????????
???????????????? return currentControlIsValid;
????????????? }
?????????????
????????????? // Event handler: Gets called when all child components
????????????? // have been created.
????????????? private function creationCompleteHandler():void
????????????? {
??????????????? // Set the focus on the first field so
??????????????? // user does not have to mouse over to it.
??????????????? // Note that the user still has to click on the
??????????????? // Flex application to give it focus. This is
??????????????? // a currently limitation in Flex.
????????????????? resetFocus();
????????????? }
???????????
??????????? // Submit form if everything is valid.
??????????? private function submitForm():void
??????????? {
??????????????? Alert.show("Form Submitted!");
??????????? }
???????????
??????????? // Clear the form and reset validation.
??????????? private function clearFormHandler():void
??????????? {
??????????????? // Clear all input fields.
??????????????? nameInput.text = "";
??????????????? phoneInput.text = "";
??????????????? emailInput.text = "";
???????????????
??????????????? // Clear validation error messages.
??????????????? nameInput.errorString = "";
??????????????? phoneInput.errorString = "";
??????????????? emailInput.errorString = "";
???????????????
??????????????? // Flag that the form is now clear
??????????????? formIsEmpty = true;
???????????????
??????????????? // Set the focus on the first field so
??????????????? // user does not have to mouse over to it.
??????????????? resetFocus();??????????????
??????????? }
???????????
??????????? // Helper method. Sets the focus on the first field so
??????????? // user does not have to mouse over to it.
??????????? 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>