mx.validators包的使用实例之一-用Validator检测必填项

  • 本站文章除注明转载外,均为本站原创或者翻译。
  • 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商;
  • 本站部分原创和翻译文章提供markdown格式源码,欢迎使用文章源码进行转载;
  • 本博客采用 WPCMD 维护;
  • 本文标题:mx.validators包的使用实例之一-用Validator检测必填项
  • 本文链接:http://zengrong.net/post/437.htm

mx.validators包,在Flex框架中是相当的有用,但由于其功能复杂,我总是边用边忘。现将使用方法记录在这里把……

第一个例子

上面这个例子演示了最简单的用法。如果在“用户名:”输入框中不输入任何文字,那么当使用Tab键把输入焦点动TextInput改变到Button的时候,TextInput的边框会变红,鼠标移动到边框上,就会出现提示文字。

这个效果的源码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="120">
    <mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入用户名!"/>
    <mx:FormItem label="用户名:">
        <mx:TextInput id="nameTI"/>
    </mx:FormItem>  
    <mx:Button id="btn" label="提交" />
</mx:Application>

从上面的源码可以看出,要使用mx.validators包中的功能真的很简单。Validator组件的功能是检测必填项。我们把要检测的组件的名字写在source属性中,把要检测的组件的属性写在property属性中,然后自定义requiredFieldError属性的值即可。当然requiredFieldError属性的值也可以不定义,那么就会使用默认的提示文字(英文)。

上面的错误提示的文字有些看不清,只需要加上这样一句就OK了:

<mx:Style>
    .errorTip
    {
        fontSize: 12;
    }
</mx:Style>

上面是一个小小的热身,让我们再来看几个简单的例子。

控制检测时机

默认的情况下,Flex当我们切换组件焦点的时候检测,能不能改变这个检测时机?看看下面这个例子:

在上面这个例子中,按Tab键切换焦点已经不能触发检测动作了,只有单击“提交”按钮才会触发检测。源码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="150">
    <mx:Style>
        <![CDATA[
        .errorTip
        {
            fontSize: 12;
        }
        ]]>
    </mx:Style>
    <mx:Validator id="nameV" source="{nameTI}" property="text" 
        requiredFieldError="必须输入姓名!"
        trigger="{btn}" triggerEvent="click"/>
    <mx:Validator id="ageV" source="{ageTI}" property="text" 
        requiredFieldError="必须输入年龄!"
        trigger="{btn}" triggerEvent="click"/>
    <mx:FormItem label="姓名:">
        <mx:TextInput id="nameTI"/>
    </mx:FormItem>
    <mx:FormItem label="年龄:">
        <mx:TextInput id="ageTI"/>
    </mx:FormItem>
    <mx:Button id="btn" label="提交" />
</mx:Application>

这是因为,在默认情况下,Validator 会在Flex发出valueCommit事件的时候进行检测,因此当焦点改变的时候,会自动进行检测。而上面的源码中,则手动指定了进行检测的事件是btn按钮的click事件。

控制错误显示的目标

Validator还有一个listen属性,这个属性有什么用呢?它用来指定检测的错误信息显示在哪个组件上。这有什么作用呢?难道我们检测到错误信息之后,不显示在发生错误的组件上,反而显示到其它组件上不成?看看例子把:

这是源码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="200">
    <mx:Style>
        <![CDATA[
        .errorTip
        {
            fontSize: 12;
        }
        ]]>
    </mx:Style>
    <mx:Validator id="nameV" source="{nameTI}" property="text" 
        requiredFieldError="必须输入姓名!"
        trigger="{btn}" triggerEvent="click"/>
    <mx:Validator id="ageV" source="{ageTI}" property="text" 
        requiredFieldError="必须输入年龄!"
        trigger="{btn}" triggerEvent="click"/>
    <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue" 
        requiredFieldError="必须选择性别!"
        trigger="{btn}" triggerEvent="click"
        listener="{maleRB}"/>
    <mx:FormItem label="姓名:" width="150">
        <mx:TextInput id="nameTI"/>
    </mx:FormItem>
    <mx:FormItem label="年龄:" width="150">
        <mx:TextInput id="ageTI"/>
    </mx:FormItem>
    <mx:FormItem label="性别:" direction="horizontal" width="150">
        <mx:RadioButtonGroup id="sexRBG"/>
        <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>
        <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>
    </mx:FormItem>
    <mx:Button id="btn" label="提交" />
</mx:Application>

在上面的例子中,对于性别的选择,由于检测两个RadioButton比较麻烦,采用了检测RadioButtonGroup的selectedValue属性的方法,如果这个属性为空,就说明两个RadioButton都没有选择。但RadioButtonGroup并不是一个可视组件,检测的错误信息无法显示出来,所以这里就使用了listen属性将显示信息转到maleRB组件上进行显示了。

本例源码下载

  mx.validators包的使用实例所有范例源码 (4.2 KiB, 1,733 hits)