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>