15.1.在TextInput及TextArea控件上使用Validator 和Formatter

2023-07-22 12:39:00

字体：大中小

来源：转载

供稿：网友

15.1.1 问题
你需要为多个TextInput 和TextArea 控件进行验证和格式化。
15.1.2 解决办法
对于所有类型的输入数据, 无论是日期, 电话号码或者货币, 都要做以下的步骤:
使用Validator 去确保所有输入数据都是有效的。
使用Formatter 去规范所有输入数据的格式。
15.1.3 讨论
如果要让多个validator 和formatter 跟一个组件一起使用的话, 我们就需要为不同类型的验证创建独立的validator. 举例说, 当某个TextInput 组件返回一个focusOut 事件的时候, 我们就需要呼叫相对应的validator 内的validate 方法。假如你想把一个validator 绑定到指定的TextInput 组件, 你就需要把那个TextInput 设定为事件源及将TextInput 的属性修改为text。
代码如下:

-XML

<mx:NumberValidator id="numValidator" source="{inputCurrency}" property="text"/>

当所有数据都通过验证以后, formatter 就会被呼叫。基础的Formatter 类可以接受一些包含”#”号格式化字符串, 用以代入一些格式化的数字或字符。比如说一个电话号码, 它的格式化字符串将会是这样子:
(###) ###-####
Formatter 的申明方法如下:

-XML

<mx:PhoneFormatter id="phoneFormatter" formatString="(###) ###-####" validPatternChars="#-() "/>

如果要使用刚才宣告的formatter, 我们需要呼叫一个名为format 的方法及将所需要的TextInput 的text 属性传递给它。

-ActionScript

inputPhone.text = phoneFormatter.format(inputPhone.text);

需要注要的是在下列的例子里, 如果输入的数据不能通过验证, 程序将会清空用户所输入的内容以及返回一个错误信息。在实际应用上来说, 这样很可能会为使用者带来不便。
代码如下:

-XML

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="400">
<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
private var vResult:ValidationResultEvent;
//负责验证及格式化的事件处理器。
private function dateFormat():void
{
vResult = dateVal.validate();
if (vResult.type==ValidationResultEvent.VALID) {
inputDate.text =
dateFormatter.format(inputDate.text);
} else {
inputDate.text= "";
}
}
private function phoneFormat():void {
vResult = phoneValidator.validate();
if (vResult.type==ValidationResultEvent.VALID) {
inputPhone.text =
phoneFormatter.format(inputPhone.text);
} else {
inputPhone.text= "";
}
}
private function currencyFormat():void {
vResult = numValidator.validate();
if (vResult.type==ValidationResultEvent.VALID) {
inputCurrency.text =
currencyFormatter.format(inputCurrency.text);
} else {
inputCurrency.text= "";
}
}

]]>
</mx:Script>
<mx:DateFormatter id="dateFormatter" formatString="day: DD,
month: MM, year: YYYY"/>
<mx:DateValidator id="dateVal" source="{inputDate}"
property="text" inputFormat="mm/dd/yyyy"/>
<mx:PhoneNumberValidator id="phoneValidator" property="text"
source="{inputPhone}"/>
<mx:PhoneFormatter id="phoneFormatter" formatString="(###) ###-
####" validPatternChars="#-() "/>
<mx:CurrencyFormatter id="currencyFormatter" currencySymbol="€"
thousandsSeparatorFrom="." decimalSeparatorFrom=","/>
<mx:NumberValidator id="numValidator" source="{inputCurrency}"
property="text"/>
<mx:Form>
<mx:FormItem label="Currency Input">
<mx:TextInput id="inputCurrency"
focusOut="currencyFormat()" width="300"/>
</mx:FormItem>
<mx:FormItem label="Phone Number Input">
<mx:TextInput id="inputPhone" focusOut="phoneFormat()"
width="300"/>
</mx:FormItem>
<mx:FormItem label="Date Input">
<mx:TextInput id="inputDate" focusOut="dateFormat();"
width="300"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>