文本输入的验证器和 errorString 出现红色和蓝色问题

Question

我在 Flex 和验证器方面遇到了一个奇怪的问题。

下面是代码：

TestMain.xml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.validators.StringValidator;

        import utils.ValidableProperty;

        [Bindable] public var nameID:ValidableProperty;

        public function start():void {
            var nameIDValidator:StringValidator = new StringValidator();
            nameIDValidator.required = true;
            nameIDValidator.maxLength = 35;
            nameID = new ValidableProperty(nameIDValidator);
            nameID.validate();
        }
    ]]>
</fx:Script>

<s:applicationComplete>
    start();
</s:applicationComplete>

<s:minHeight>600</s:minHeight>
<s:minWidth>955</s:minWidth>

<mx:Form color="0x323232" paddingTop="0">
    <s:Label text="See strange behavior of errorString during validator operation with validate."/>
    <mx:FormItem label="Name">
        <mx:TextInput id="nameInput" width="300" errorString="@{nameID.errorMessage}" text="@{nameID.value}"/>
    </mx:FormItem>
</mx:Form>

ValidableProperty.as

package utils
{
    import flash.events.EventDispatcher;
    import mx.events.PropertyChangeEvent;
    import mx.events.ValidationResultEvent;
    import mx.validators.Validator;

    public class ValidableProperty extends EventDispatcher
    {
        [Bindable]
        public var value:Object;

        private var validator:Validator;

        [Bindable]
        public var isValid:Boolean;

        [Bindable]
        public var errorMessage:String;

        private var statusChangeHandler:Function;

        public function ValidableProperty(validator:Validator, statusChangeHandler:Function=null,
                                          target:IEventDispatcher=null) {
            super(target);

            this.validator = validator;
            this.statusChangeHandler = statusChangeHandler;

            this.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler);
        }

        private function propertyChangeHandler(evt:PropertyChangeEvent):void {
            if (evt.property == "value") {
                this.validate();
            }
        }

        public function validate():void {
            var result:ValidationResultEvent = this.validator.validate(this.value);
            this.isValid = (result.type == ValidationResultEvent.VALID);
            if (isValid) {
                this.errorMessage = null; 
            }
            else {
                this.errorMessage = result.message;
            }
            if (statusChangeHandler != null)
                statusChangeHandler();
        }

        public function set required(required:Boolean):void {
            if (validator == null)
                return;
            validator.required = required;
        }
    }
}

当您执行这个简单的代码时，当写入一个值时，例如“A”，错误消息值“此字段是必需的”将消失，但输入文本边框上的红色仍然会出现在那里与蓝色。

删除A值时，这次会出现蓝色和红色的情况（不能一直重现），并出现错误信息“此字段为必填项”。

我在这里缺少什么？这是Flex中的一个错误吗？我们不能在文本输入边框上同时使用红色和蓝色。

我正在使用 Eclipse 和 Flex SDK 4.5.0（内部版本 20967）

Answer 1

这不是 Flex 中的错误。这是您编码方式的一个错误。如果您要遵循文档中的示例< /a>，它会起作用。

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate StringValidator. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>
        <mx:StringValidator source="{nameInput}" property="text" 
                tooShortError="This string is shorter than the minimum length of 4. " 
                tooLongError="This string is longer than the maximum allowed length of 35." 
                minLength="4" maxLength="35"/>
    </fx:Declarations>

<s:Form>
    <s:FormItem label="Name">
        <s:TextInput id="nameInput" width="300" text="{nameID.value}"/>
    </s:FormItem>
</s:Form>

</s:Application>

Answer 2

我终于解决了这个问题。我使用 mx:TextInput 而不是 s:TextInput。感谢 J_A_X 您的建议！