Question

我是flex 4的新版本。在我的示例应用程序中，我正在使用验证器。它显示控件旁边的错误消息和图标。我的问题是，如何删除这些错误消息和错误图标？当鼠标悬停在特定控件上时，我想将错误消息显示为errorTip。

谢谢。

修改

我的示例代码。我正在使用其他一些控件

<fx:Declarations>
    <mx:StringValidator id="nameValidator"
                        source="{employeeName}"
                        property="text"
                        tooLongError="Too long error"
                        tooShortError="Too short error"
                        maxLength="20" minLength="4"/>

</fx:Declarations>

<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>
            <s:FormItem>                        
                <s:TextInput id="employeeName"/>                        
            </s:FormItem>
            <s:FormItem>                        
                <s:TextInput id="employeeID"/>                      
            </s:FormItem>
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

此代码显示错误消息，并显示错误图标。

并且

<fx:Declarations>
    <mx:StringValidator id="nameValidator"
                        source="{employeeName}"
                        property="text"
                        tooLongError="Too long error"
                        tooShortError="Too short error"
                        maxLength="20" minLength="4"/>

</fx:Declarations>

<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>                    
            <s:TextInput id="employeeName" />
            <s:TextInput id="employeeID" />
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

此代码不显示错误图标和错误消息。当鼠标悬停在TextInput控件上时，它仅显示错误提示。我想为我的代码提供此错误提示。

更新

        <mx:StringValidator
        id="userName"
        source="{employeeName}"
        property="text"
        minLength="4" maxLength="20"
        triggerEvent="rollOver"
        trigger="{employeeName}"/>
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>
            <s:FormItem>    
                <mx:HBox>   
                <s:TextInput id="employeeName"/>
                                </mx:HBox>                      
            </s:FormItem>
            <s:FormItem>                        
                <s:TextInput id="employeeID"/>                      
            </s:FormItem>
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

现在我做到了。

我的当前输出是第一张图片，第二张是我需要的：
enter image description here

Answer 1

我建议您仔细查看Adobe文档中的FLEX示例。 http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f52.html

我认为您需要的与“清除验证错误”示例类似，您只需要自动触发验证。

更新 - 这是一个适用于我的示例代码

您需要在textInput ...

上调用rollOver事件上的方法

<?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" minWidth="955" minHeight="600">


<s:layout>
    <s:VerticalLayout/>
</s:layout>

<fx:Declarations>
    <mx:StringValidator
        id="userNameValidator"
        source="{employeeName}"
        property="text"
        minLength="4" maxLength="20"/>
</fx:Declarations>

<fx:Script>
    <![CDATA[

        import mx.events.ValidationResultEvent;
        private var vResult:ValidationResultEvent;

        // Function to validate data and submit it to the server. 
        private function validateAndSubmit():void {
            // Validate the required fields. 
            vResult = userNameValidator.validate();
            if (vResult.type==ValidationResultEvent.INVALID) 
                return;             
        }

        // Clear the input controls and the errorString property 
        // when resetting the form. 
        private function resetForm():void {
            employeeName.text = '';
            employeeName.errorString = '';
        }
    ]]>
</fx:Script>

<mx:HDividedBox>
    <s:Panel>
        <s:Form>
            <s:FormItem>    
                <s:TextInput 
                    id          = "employeeName"
                    rollOver    = "validateAndSubmit()"/>
            </s:FormItem>
            <s:FormItem>                        
                <s:TextInput 
                    id          = "employeeID"/>                      
            </s:FormItem>
            <s:FormItem>                        
                <s:Button
                    label       = "Clear"
                    click       = "resetForm()"/>

            </s:FormItem>
        </s:Form>
    </s:Panel>
</mx:HDividedBox>   


</s:Application>

Answer 2

您必须覆盖并修改默认的FormItemSkin.mxml才能执行此操作。

删除errorTextDisplay组件

<s:RichText id="errorTextDisplay" includeIn="errorStates"
        fontStyle="italic" fontWeight="normal" color="0xFE0000"
        left="helpCol:27" right="helpCol:10"
        bottom="row1:5" baseline="row1:0" 
        maxDisplayedLines="-1"/>

将contentGroup showErrorTip设置为true

<!-- Don't show the error tip on the content elements -->
<s:Group id="contentGroup" showErrorTip="true" showErrorSkin="true"
     left="contentCol:0" right="contentCol:1" 
     baseline="row1:0" bottom="row1:5">

参考这些链接。

link 1和Link 2

我相信，它会帮助你

Flex 4 - 如何在FormItem中设置errorTip？

2 个答案: