自定义一个Flex的手机号码验证组件

Flex,自定义的验证组件
由于flex自带的电话号码验证组件不符合中国的手机号,所以最好自定义一个中国的手机号验证组件
首先,自定义的验证组件继承某个验证组件,毕竟很多东西已经有了,就不要再多写了,容易造成双层资源浪费
我们的验证组件类.
1. 继承一下Validator
Validator是验证组件的父类,可以完成非空的验证,也可以完成对验证组件数组的验证工作
让我们PhoneValidator继承Validator:
  public class PhoneValidator extends Validator
2. 验证的步骤:
当TextInput的值需要进行验证时,会调用Validator.doValidation(),doValidation()会将验证结果封装到ValidationResult类中,
然后将ValidationResult行成Array,返回此Array;之后avm接手此Array,生成ToolTip并调用能找到的样式表中的.errorTip{},
找到则应用,找不到则默认(如默认字体9号).我们只有完成了验证,把错误格式的提示信息封装到ValidationResult类中,将ValidationResult放入到Array中
就完成我们组件的验证任务了
所以我们的验证关键点就是覆盖 doValidation() 这个方法了:
  /**
   * 覆盖Validator的验证方法
   * */
  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);
  }
  /**
   * 验证cn的手机号
   * */
  public static function validatePhoneNumberCN(validator:PhoneValidator,
              value:Object,
              baseField:String):Array{
   var results:Array = [];
   if(!matchPhone(value.toString())){
    results.push(new ValidationResult(true,baseField,'手机号格式错误',validator.invalidFormat));
   }
   return results;
  }
  /**
   * 查看手机号是否是 cm,cu,ct的
   * */
  private static function matchPhone(value:String):Boolean{
   if(cm.test(value))
    return true;
   if(cu.test(value))
    return true;
   if(ct.test(value))
    return true;
   return false;
  }
  protected static const cm:RegExp = /(^134[0-8]/d{7}$)|(^13[5-9]/d{8}$)|(^15[01789]/d{8}$)|(^188/d{8}$)|(^1349/d{7}$)/;
  protected static const cu:RegExp = /(^1349/d{7}$)|(^13[12]/d{8}$)|(^156/d{8}$)/;
  protected static const ct:RegExp = /(^1[35]3/d{8}$)|(^18[79]/d{8}$)/;
  private var _invalidFormat:String = "手机号格式错误";
  
  public function set invalidFormat(value:String):void{
   _invalidFormat = value;
  }
  public function get invalidFormat():String{
   return _invalidFormat;
  }
  public function PhoneValidator()
  {
   super();
  }
doValidation()首先调用super的doValidation进行非空验证,如果通过了非空验证,再调用validatePhoneNumberCN()完成对中国电话的验证,
validatePhoneNumberCN()中进行手机号的匹配工作,如输入值不符合要求则封装一个ValidationResult放入Array,最后将Array返回.
matchPhone()应用移动,联通,电信的号码正则与输入值进行匹配,以完成号码匹配的工作.
PhoneValidator有一个属性_invalidFormat,表示将来如果输入值的格式错误,flex将会显示_invalidFormat中的提示信息.
如果要改变此验证组件的样式,需要在应用此验证组件的mxml中定义.errorTip的样式
<style>
 .errorTip{
  font-size:12;
 }
</style>
到此完毕.
完整的PhoneValidator:

------------------------------------------------------------------------------------------------------------------------------

package org.sk.validator
{
 import mx.validators.ValidationResult;
 import mx.validators.Validator;
 
 public class PhoneValidator extends Validator
 {
  protected static const cm:RegExp = /(^134[0-8]/d{7}$)|(^13[5-9]/d{8}$)|(^15[01789]/d{8}$)|(^188/d{8}$)|(^1349/d{7}$)/;
  protected static const cu:RegExp = /(^1349/d{7}$)|(^13[12]/d{8}$)|(^156/d{8}$)/;
  protected static const ct:RegExp = /(^1[35]3/d{8}$)|(^18[79]/d{8}$)/;
  private var _invalidFormat:String = "手机号格式错误";
  
  public function set invalidFormat(value:String):void{
   _invalidFormat = value;
  }
  public function get invalidFormat():String{
   return _invalidFormat;
  }
  public function PhoneValidator()
  {
   super();
  }
  /**
   * 查看手机号是否是 cm,cu,ct的
   * */
  private static function matchPhone(value:String):Boolean{
   if(cm.test(value))
    return true;
   if(cu.test(value))
    return true;
   if(ct.test(value))
    return true;
   return false;
  }
  /**
   * 验证cn的手机号
   * */
  public static function validatePhoneNumberCN(validator:PhoneValidator,
              value:Object,
              baseField:String):Array{
   var results:Array = [];
   if(!matchPhone(value.toString())){
    results.push(new ValidationResult(true,baseField,'手机号格式错误',validator.invalidFormat));
   }
   return results;
  }
  /**
   * 覆盖Validator的验证方法
   * */
  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);
  }
 }
}

 

最后测试一下这个组件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:validator="org.sk.validator.*">
 <mx:TextInput id="num" x="92" y="81"/>
 <validator:PhoneValidator source="{num}" property="text" id="v_phone" invalidFormat="号码格式错误"/>
 <mx:Button x="92" y="124" label="验证" click="v_phone.validate()"/>
 <mx:Style>
  .errorTip{
   font-size:12;
  }
 </mx:Style>
</mx:Application>