Flex 自定义 Validator 验证开始时间早于结束时间
flex 自定义验证器(Validator),先看下示例(有点大,500多K,请耐心等待加载...)
代码如下:
ValidatorDate.as
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 package utils 2 { 3 import mx.controls.DateField; 4 import mx.validators.ValidationResult; 5 import mx.validators.Validator; 6 7 /** 8 * 用于验证起始时间必须小于结束时间。<br> 9 * 使用时必须指定 startDateField 与 endDateField,可选属性 errorMessage。<br> 10 * 注意:由于涉及到两个控件,所以对于 required 判断是同时的(必须两个时间同时不为空),可自定义 requiredFieldError 使它看上去"正确"。 11 */ 12 public class ValidatorDate extends Validator 13 { 14 public function ValidatorDate() 15 { 16 super(); 17 } 18 19 private var _startDateField:DateField; 20 21 public function get startDateField():DateField 22 { 23 return _startDateField; 24 } 25 26 public function set startDateField(value:DateField):void 27 { 28 removeListenerHandler(); 29 30 _startDateField = value; 31 32 addListenerHandler(); 33 } 34 35 private var _endDateField:DateField; 36 37 public function get endDateField():DateField 38 { 39 return _endDateField; 40 } 41 42 public function set endDateField(value:DateField):void 43 { 44 removeListenerHandler(); 45 46 _endDateField = value; 47 48 addListenerHandler(); 49 } 50 51 private var _errorMessage:String = "起始时间不能晚于结束时间"; 52 53 public function get errorMessage():String 54 { 55 return _errorMessage; 56 } 57 58 public function set errorMessage(value:String):void 59 { 60 _errorMessage = value; 61 } 62 63 64 override protected function get actualListeners():Array 65 { 66 return [_startDateField, _endDateField]; 67 } 68 69 override protected function doValidation(value:Object):Array 70 { 71 var results:Array = super.doValidation(value); 72 73 if (results.length > 0 || ((value == null) && !required)) 74 { 75 return results; 76 } 77 else 78 { 79 var start:Date = value.startDate; 80 var end:Date = value.endDate; 81 if(start.time > end.time) 82 { 83 var vr:ValidationResult = new ValidationResult(true, "", "startIsAfterEnd", errorMessage); 84 results.push(vr); 85 } 86 } 87 88 return results; 89 } 90 91 override protected function getValueFromSource():Object 92 { 93 var value:Object = {}; 94 95 if(_startDateField && _endDateField && _startDateField.selectedDate && _endDateField.selectedDate) 96 { 97 value.startDate = _startDateField.selectedDate; 98 value.endDate = _endDateField.selectedDate; 99 100 return value; 101 } 102 else 103 { 104 return null; 105 } 106 } 107 108 109 } 110 }
示例程序:ValidateSample.mxml
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" xmlns:utils="utils.*"> 5 <fx:Declarations> 6 <!-- 将非可视元素(例如服务、值对象)放在此处 --> 7 <utils:ValidatorDate id="vd" startDateField="{startDateField}" endDateField="{endDateField}" 8 trigger="{submitButton}" triggerEvent="click" 9 requiredFieldError="开始日期与结束日期都不能为空" 10 errorMessage="开始日期不能晚于结束日期"/> 11 </fx:Declarations> 12 13 <s:Form width="100%" height="100%"> 14 <s:FormHeading label="验证操作示例"/> 15 <s:FormItem label="开始日期"> 16 <!--这里 formatString 是必须设置的属性,否则 selectedDate 始终为null --> 17 <mx:DateField id="startDateField" formatString="YYYY-MM-DD"/> 18 </s:FormItem> 19 <s:FormItem label="结束日期"> 20 <mx:DateField id="endDateField" formatString="YYYY-MM-DD"/> 21 </s:FormItem> 22 <s:FormItem> 23 <s:Button id="submitButton" label="提交" click="trace('start date:', startDateField.selectedDate);"/> 24 </s:FormItem> 25 </s:Form> 26 </s:Group>