Flex驗證架構技術總結

      在開發flex的過程中，經常會出現要驗證文本框輸入字元是否有效的問題，比如說如果輸入的為空值，或者輸入為非數字值，或者沒有滿足正規表達式類型。如果使用Flex validator驗證器的話，可以很好的在前端驗證一些字段的業務邏輯。下面我将通過一些簡單的例子，說明flex驗證架構在項目中應用的場景。

1.沒有使用flex驗證器的場景

比如我們在判斷該字元非空，且為數字類型，我們可以寫入如下as代碼片斷：

  //使用正規表達式判斷是否為數字,且非空值

                public function isNumric(value:String):Boolean{

                        if(isNaN(new Number(value)) == false|| value.length ==0)

                                return true;

                        return false;

                }

要調用它的時候寫入：

var data:String = this.ageTxt.text;

if(!isNumric(data)){

              Alert.show("輸入的非法數字，請重新輸入");

                 return;

}

注意：

      這樣寫簡單的驗證判斷還有，如果還要判斷它的允許的最大值（maxValue）和最小值（minValue)，我們還在as腳本中寫入邏輯判斷，而且如果要判斷的文本框比較多的情況下，會還有非常多的邏輯判斷，是以接下來我們引入flex validator驗證器。

2.應用系統自帶的驗證器

     系統自帶的驗證器使用比較簡單，隻要在flex中的< fx:  Declarations>< / fx:  Declarations>中引入即可(以下我使用的開發環境為flex 4.0及以上版本)，針對上面寫的邏輯判斷，我寫入如下驗證器：

<mx:NumberValidator id="v_prevCountA"   domain="int"

                                                        integerError="主燈數量為整型"

                                                        required="true"

                                                        requiredFieldError="請輸入改造前主燈數量"

                                                        source="{prevCountA}"

                                                        property="text"

                                                        trigger="{btnSave}" 

                                                        triggerEvent="click"

                                                        allowNegative="false"

                                                        />

如果我們還可以寫上maxValue和minValue.

如下所示：

<mx:NumberValidator id="v_prevCountA"

                                  domain="int"

                                  integerError="主燈數量為整型"

                                  required="true" requiredFieldError="請輸入改造前主燈數量"

                                  source="{prevCountA}"

                                 property="text"

                                 trigger="{btnSave}" 

                                 triggerEvent="click"

                                 allowNegative="false"

                                 minValue="0"

                                 maxValue="100"  

/>

這樣寫在标簽中引入即可，我們還可以寫入浮點型的，如下所示：

  <mx:NumberValidator id="v_prevPowerA" decimalSeparator="." 

                                     precision="2"  domain="real"

                                     decimalPointCountError="多次出現小數分隔符"

                                      invalidFormatCharsError="改造前主燈功率要為數字"

                                      required="true" requiredFieldError="請輸入改造前主燈功率"

                                      source="{prevPowerA}"

                                       property="text"

                                       trigger="{btnSave}" 

                                      triggerEvent="click"

                                      allowNegative="false"

                                      invalidCharError="輸入為非法字元，請輸入數字"

                 />

注意：  這樣寫相比用as語句腳本寫的優勢在于可以不斷擴充其邏輯判斷，而且還支援不斷的複用。等等 ，甚至不用寫一條判斷語句，不過一般情況下，我們還會寫入邏輯判斷.如下所示：

//批量表單字段校驗

                                var validateResult:Array=Validator.validateAll([

                                           v_prevPowerA,

                                           v_prevCountA

                                ]);

                                //若校驗通過

                                if (validateResult.length==0){  

                                        Alert.show("你确認要儲存目前操作嗎？", "确認", 3, this, alertClickHandler); 

                                        return;  

                                }

                        }

驗證通過了，即可進行你要做的操作，比如一些常見的CURD（四大操作）都可以。

3.應用自定義驗證器的場景

       有時候一些比較複雜的邏輯判斷，比如電話号碼，固定電話，郵箱，特别是固定電話，因為我們中國的一些地方和美國的一些地方的電話号碼的形式不盡相同，這種情況下就不可以使用flex系統自帶的驗證器了，下面我舉些例子，說明如何程式設計實作自定義驗證器。

OfficePhoneValidator.as（actionscript 驗證器）,如下所示：

package cn.ac.iscas.gz.sems.util

{

        import mx.validators.ValidationResult;

        import mx.validators.Validator;

        public class OfficePhoneValidator extends Validator

        {

                protected static const cm:RegExp = /^\d{3}-\d{8}$/ ;

                protected static const tm:RegExp = /^\d{4}-\d{7}$/;

                private var _invalidFormat:String = "固定電話号格式錯誤";

                //會被外面的覆寫

                //使用getter/setter方法

                public function set invalidFormat(value:String):void{

                        _invalidFormat = value;

                }

                public function get invalidFormat():String{

                        return _invalidFormat;

                }

                public function OfficePhoneValidator()

                {

                        super();

                }

                private static function matchPhone(value:String):Boolean{

                        if(cm.test(value))

                                return true;

                        if(tm.test(value))

                                return true;

                        return false;

                }

                public static function validatePhoneNumberCN(validator:OfficePhoneValidator,

                                                                                                         value:Object,

                                                                                                         baseField:String):Array{

                        var results:Array = [];

                        if(!matchPhone(value.toString())){

                                results.push(new ValidationResult(true,baseField,'手機号格式錯誤123',validator.invalidFormat));

                        }

                        return results;

                }

                override protected function doValidation(value:Object):Array{

                        var results:Array = super.doValidation(value);

                        var val:String = value ? String(value) : "";

                        if (results.length > 0 || ((val.length == 0) && !required))

                                return results;

                        else

                                return validatePhoneNumberCN(this, value, null);

                }

        }

}

定義好了驗證器，下面我們要應用這個驗證器，在*.mxml做如下程式設計。

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

  width="498" height="336" styleName="Application"

     title="檢視我的資料視窗" textAlign="center"  

     close="titlewindow1_closeHandler()" creationComplete="titlewindow1_creationCompleteHandler(event)"

  xmlns:validator="cn.ac.iscas.gz.sems.util.*"

      >

高亮顯示即為驗證器包所在位置.

然後跟系統自帶的驗證器使用一緻，如下所示：

                <validator:OfficePhoneValidator  source="{officePhone}"

                                                                  property="text"

                                                                   id="v_offcePhone" 

                                                                  invalidFormat="固定電話号碼輸入有誤，請重新輸入"

                                                                  trigger="{saveBtn}"

                                                                  required="false"

                        />

最後做邏輯判斷，驗證通過再下接下來的操作。

  //批量表單字段校驗

                                var validateResult:Array=Validator.validateAll([

                                        v_phone,

                                        v_email,

                                        v_offcePhone,

                                        v_fullname

                                ]);

                                //若校驗通過

                                if (!validateResult.length==0){  

                                //        Alert.show("你确認要儲存目前操作嗎？", "确認", 3, this, alertClickHandler); 

                                        return;  

                                }

4.總結

  flex驗證架構适合做一些複雜的邏輯判斷，比如正規表達式判斷，還有它支援複用，可以在項目工程中多次地方使用，隻要按上面那樣引入包即可，這樣就不必要再程式設計了， “基于不重用使用的輪子”  ，“我在車輪上拍死一隻蒼蠅”。

(完，待續.........)