使用验证器和 textinput 的 errorString 时出现红色和蓝色的问题

Posted 2023-04-18

【中文标题】使用验证器和 textinput 的 errorString 时出现红色和蓝色的问题

【英文标题】：Issue with both red and blue colors with validator and errorString of textinput

【发布时间】：2011-10-10 02:48:39

【问题描述】：

我在使用 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"  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”，errorMessage值“this field is required”会消失，但是inputtext边框上的红色仍然是蓝色的。

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

我在这里缺少什么？这是flex中的错误吗？我们不能在 textinput 边框上同时使用红色和蓝色。

我正在将 Eclipse 与 Flex SDK 4.5.0（内部版本 20967）一起使用

【问题讨论】：

为什么要在应用程序启动时进行验证？另外，为什么不把验证器放在 mxml 中呢？第三，如果您已经在使用 Spark，为什么不使用 Spark 表单？我也不明白进行双重绑定并尝试验证模型而不是视图的意义...您是否尝试过文档中给出的示例？

【参考方案1】：

这不是 Flex 中的错误。这是你如何编码的一个错误。如果您要关注example in the documentation，它会起作用。

<?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"  text="nameID.value"/>
    </s:FormItem>
</s:Form>

</s:Application>

【讨论】：

您好，感谢您的回复，但我提供了一个简单的示例来重现我的错误。实际上我使用 MVC 我不能直接使用 StringValidator 因为我使用其他类型的验证器。这就是我定义 ValidableProperty 的原因。我尝试关注 [link]livedocs.adobe.com/flex/3/html/…“使用 errorString 显示验证错误”，但重置似乎无法正常工作。从我的角度来看，启用或禁用错误消息不是视图的工作，这就是我使用双重绑定的原因。每次修改值时，验证器都会重新验证我的文本输入并更新错误。

此实现适用于我项目中的其他 StringValidator，但对于某些它不起作用，我找不到原因...

MVC 与此无关。您正在尝试验证用户输入，而不是您从模型中获得的数据。

【参考方案2】：

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