默认情况下as3并没有为我们提供可以应用于多组输入控件的验证器,因此对于包含大量输入,而且验证规则相同的应用程序来说,就需要通过其他途径来实现。下面说两种方法:
1.参考IBM的构建Flex自动验证框架
具体思想是构建一个控制器 (controller in MVC design pattern),让每一个被验证控件分发validate事件,让验证器依次处理。下面说我的方法。
2.自定义输入控件,为控件增加一个内置验证器,和一个外部提交按钮的引用,输入控件定义时,将提交按钮属性设置成想要指定的按钮即可。
RequiredTextInput.as文件定义如下:
package com.cachetian.examples.components
{
import flash.events.EventPhase;
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.ValidationResultEvent;
import mx.validators.StringValidator;
import mx.validators.ValidationResult;
import spark.components.Button;
import spark.components.TextInput;
/**
*
* @author Cachetian
*
*/
public class RequiredTextInput extends TextInput
{
public function RequiredTextInput()
{
super();
//init the validator
_stringValidatorRef.source = this;
_stringValidatorRef.property = "text";
_stringValidatorRef.required = true;
_stringValidatorRef.addEventListener(ValidationResultEvent.VALID, validator_ValidationResultEventHandler);
_stringValidatorRef.addEventListener(ValidationResultEvent.INVALID, validator_ValidationResultEventHandler);
}
// add a String validator reference
private var _stringValidatorRef:StringValidator = new StringValidator();
// add a submit button reference
private var _submitButtonRef:Button = null;
//
//getter and setters
//
public function get submitButtonRef():Button
{
return _submitButtonRef;
}
/**
*
*/
public function set submitButtonRef(value:Button):void
{
_submitButtonRef = value;
if (_submitButtonRef)
{
//init the button
_submitButtonRef.addEventListener(FlexEvent.UPDATE_COMPLETE, submitBtn_clickHandler);
}
}
//
//event handlers
//
private function submitBtn_clickHandler(event:FlexEvent):void
{
if (_stringValidatorRef.validate().type == ValidationResultEvent.INVALID)
{
event.stopImmediatePropagation();//在未输入的情况下,只提示第一个invalid的验证输入框
}
}
public function validator_ValidationResultEventHandler(event:ValidationResultEvent):void
{
if (event.type == ValidationResultEvent.INVALID)
{
_submitButtonRef.enabled = false;
}
else //if (event.type == ValidationResultEvent.VALID)
{
_submitButtonRef.enabled = true;
}
}
}
}
演示代码如下:
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function submitBtn_clickHandler(event:MouseEvent):void
{
Alert.show("验证成功", "多输入验证演示程序");
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Form>
<s:FormHeading label="Multi Text Input Validation Example"/>
<s:FormItem label="user name" required="true">
<components:RequiredTextInput submitButtonRef="{submitBtn}"/>
</s:FormItem>
<s:FormItem label="user password" required="true">
<components:RequiredTextInput submitButtonRef="{submitBtn}"/>
</s:FormItem>
<s:FormItem label="email address" required="true">
<components:RequiredTextInput submitButtonRef="{submitBtn}"/>
</s:FormItem>
<s:FormItem>
<s:Button id="submitBtn" label="submit" enabled="false" click="submitBtn_clickHandler(event)"/>
</s:FormItem>
</s:Form>
效果截图如下:
程序效果可以访问(这个不保证永久有效哦):
http://cachetian.com/blog/tech/flex/examples/MultiInputValidationExamples.html