|
? ? ? 在开发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;
? ?? ???
? ?? ???/**
? ?? ?? ?* @ClassName: PhoneValidator
? ?? ?? ?* @Description: 验证用户的电话号码信息
? ?? ?? ?* @author xuzhongming Email： xuzhongming@gz.iscas.ac.cn
? ?? ?? ?* @date 2012-5-11 -?
? ?? ?? ?* @version : 1.0
? ?? ?? ?*/
? ?? ???
? ?? ???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();
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? /**
? ?? ?? ?? ?? ???* 查看手机号是否是 cm,cu,ct的
? ?? ?? ?? ?? ???* */
? ?? ?? ?? ?? ? private static function matchPhone(value:String):Boolean{
? ?? ?? ?? ?? ?? ?? ?? ?if(cm.test(value))
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???return true;
? ?? ?? ?? ?? ?? ?? ?? ?if(tm.test(value))
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???return true;
? ?? ?? ?? ?? ?? ?? ?? ?return false;
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? /**
? ?? ?? ?? ?? ???* 验证cn的手机号
? ?? ?? ?? ?? ???* */
? ?? ?? ?? ?? ? 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;
? ?? ?? ?? ?? ? }
? ?? ?? ?? ?? ? /**
? ?? ?? ?? ?? ???* 覆盖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);
? ?? ?? ?? ?? ? }
? ?? ???}
}
定义好了验证器，下面我们要应用这个验证器，在*.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("你确认要保存当前操作吗？",alertClickHandler);?
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? return;??
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???}
4.总结
??flex验证框架适合做一些复杂的逻辑判断，比如正则表达式判断，还有它支持复用，可以在项目工程中多次地方使用，只要按上面那样引入包即可，这样就不必要再编程了，
“基于不重用使用的轮子”
?，“我在车轮上拍死一只苍蝇”。
(完，待续.........)
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
