- 浏览: 107810 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
renlifeng:
有没有完整的代码下载?我按照你说的做了。结果是滑动的时候是不正 ...
IPhone 之 UIPageControl,UIScrollView 分页 -
fireflylover:
MyEclipse你安装完成后就会有一个Eclipse文件夹呀 ...
Flex+J2EE+Lcds在myEclipse中的安装 -
flyheart_1989:
您好,我想请问你个问题:
(6)注意:这一步很重要,是要你选择 ...
Flex+J2EE+Lcds在myEclipse中的安装 -
baixiaozhe:
不错 很有用
Flex 读取XML配置文件总结 -
harry_2013:
楼主辛苦了, 小弟刚接触abap。郁闷ing
SAP标准教材名称所代表的模块和含义(转)
flex 表单验证大全
- 博客分类:
- FLEX
1.验证必填项
代 码如下:
<mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入用户名!"/>
<mx:FormItem label="用户名:">
<mx:TextInput id="nameTI"/>
</mx:FormItem>
<mx:Button id="btn" label="提交" />
Validator组件的功能是检测必填项。我们把要检测的组件的名字写在source属性中,把要检测的组件的属性写在property属性中,然后自 定义 requiredFieldError属性的值即可。当然requiredFieldError属性的值也可以不定义,那么就会使用默认的提示文字。
上面的错误提示的文字有些看不清,只需要加上这样一句就OK了:
<mx:Style>
.errorTip
{
fontSize: 12;
}
</mx:Style>
2.控制检测时机
默认的情况下,Flex当我们切换组件焦点的时候检测
任意动作触发验证有两种写法。一种是在验证组件中指明触发器和触发动作。另一种是执行事件处理函数。
在验证组件中指明触发器和触发动作的语法如下所示。
<mx:验证组件类型
source="{输入源id}"
property="输入源的属性"
trigger="{触发器}"
triggerEvent="触发事件">
下面这个例子为按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: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事件。
任意动作的触发也可采用代码触发验证方式。
其语法如下所示。
<组件事件="验证组件.validate();"/>
验证组件都包含一个validate方法,用以代码执行验证。
比 如:
<mx:Button id="btn" label="提交" click="nameV.validate();" />
3.验 证失败处理
验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型,只是这些错误类型的提示是英文的,用户可能需要改变提示。修改错误提示的方法是修改 组件中相应的错误类型属性。例PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。
用户可根据需要修改相应的出错信息。其语法如下所示。
<验证组件错误类型属性="自定义错误提示"/>
例:
//引用ValidationResult Event类
import mx.events.ValidationResultEvent;
private function checkHandle():void //验证处理函数
{
if(emailV.validate().type==ValidationResultEvent.VALID)
{
Alert.show("电子邮件验证成功"); //提示"验证成功"
}
}
<!--按钮组件,用于验证处理-->
<mx:Button id="mySubmit" label="验证" click="checkHandle();"/>
注:
If(验证组件id.validate().type==ValidationResultEvent.VALID)
ValidationResultEvent类包含于“mx.events.*”中,是验证结果事件类。其中,INVALID值表示验证失败,VALID 值表示验证成功。
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: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组件上进行显示了。
4.批量验证
创建一个表 单
<mx:Form>
<mx:FormItem label="当前部门: ">
<mx:Text id="txtDepartName" width="100"/>
</mx:FormItem>
<mx:FormItem label="*新建角色名称(至多10个汉字): ">
<mx:TextInput id="roleName" width="100%"/>
</mx:FormItem>
<mx:FormItem label="*新建角色名称(至多10个英文字母): ">
<mx:TextInput id="roleEnName" width="100%"/>
</mx:FormItem>
<mx:FormItem label="角色描述(至多50个汉字): ">
<mx:TextInput id="roleDescibe" width="100%"/>
</mx:FormItem>
<mx:ControlBar>
<mx:Button id="btnSubmit" label="提交" click="btnSubmit_click()" />
<mx:Button id="btnClose" label="关闭" click="btnClose_click()" />
</mx:ControlBar>
//创建验证控件,放在数组里
<fx:Array id="roleNameValidators">
<mx:Validator id="roleNameValidator"
source="{roleName}" property="text"
required="true" requiredFieldError="请输入角色名" />
</fx:Array>
//通过数组,创建组合验证
<fx:Array id="roleEnNameValidators">
<mx:StringValidator source="{roleEnName}" property="text"
tooShortError="字符串太短了,请输入最少1个字符. "
tooLongError="字符串太长了,请输入最长10个字符. "
minLength="1" maxLength="10"/>
<mx:RegExpValidator id="roleEnNameValidator"
source="{roleEnName}" property="text"
flags="g,i" expression="^[a-z]+$"
noMatchError="请输入正确的英文字母"
required="false"/>
</fx:Array>
</fx:Declarations>
//代码
private function btnSubmit_click():void{
//分别检测验证是否通过,如果没有通过,则通过派发事件,主动显示错误提示
if(Validator.validateAll(roleEnNameValidators).length != 0)
roleEnName.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
else if(Validator.validateAll(roleNameValidators).length != 0)
roleName.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
else
{
var par:powerModule = this.owner as powerModule;
par.roleList.addItem({label:"大三辅导员",data:"3"});
var model:RoleModel=new RoleModel();
model.roleName="大三辅导员";
model.roleEnName="daisan";
model.roleID=par.personVo.departID+"."+model.roleEnName;
model.ysxh="010200";
model.roleDescribe="测试用的";
AddRoleResult.token=roleService.add(model);
}
}
附录:
1.邮件验证
<mx:EmailValidator
id="emailV"
source="{txtEmail}"
property="text"
invalidCharError="非法字符"
invalidDomainError="非法域"
invalidIPDomainError="非法IP域"
missingAtSignError="缺少@符"
missingPeriodInDomainError="缺少域后缀"
missingUsernameError="缺少用户名"/>
2.字符串长度验证
<mx:StringValidator source="{fname}" property="text"
tooShortError="字符串太短了,请输入最少4个字符. "
tooLongError="字符串太长了,请输入最长20个字符. "
minLength="4" maxLength="20"
trigger="{myButton}" triggerEvent="click"
valid="Alert.show('字符串格式正确!');"/>
3.日期验证
<mx:DateValidator source="{txtDate}" property="text"
required="true" requiredFieldError="请输入日期"
allowedFormatChars="-" inputFormat="YYYY-MM-DD"
trigger="{btnSubmit}" triggerEvent="click"
valid="mx.controls.Alert.show('验证成功');"
invalid="mx.controls.Alert.show('验证失败');"
wrongDayError="日输入错误"
wrongMonthError="月输入错误"
wrongYearError="年输入错误"
wrongLengthError="日期长度错误"
invalidCharError="日期分隔符错误"
formatError="inputFormat 配置错误"/>
4.英文字母验证
<mx:RegExpValidator id="regExpValidator"
source="{txtInput}" property="text"
flags="g,i" expression="^[a-z]+$"
valid="handleResult(event)" invalid="handleResult(event)"
trigger="{btnSubmit}" triggerEvent="click"
noMatchError="请输入正确的英文字母"
required="false"/>
5.年龄验证
<mx:NumberValidator id="ageV" source="{ageTI}" property="text"
domain="int"
minValue="6"
maxValue="100"
lowerThanMinError="年龄过小!"
exceedsMaxError="年龄过大!"
integerError="年龄必须是整数!"
invalidCharError='输入了非数字字符!'
requiredFieldError="必须输入年龄!"
trigger="{btn}" triggerEvent="click"/>
6.性别验证
<mx:Validator id="sexV" source="{sexRBG}" property="selectedValue"
requiredFieldError="必须选择性别!"
trigger="{btn}" triggerEvent="click"
listener="{maleRB}"/>
<mx:FormItem label="性别:" direction="horizontal" width="200">
<mx:RadioButtonGroup id="sexRBG">
<mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>
<mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>
</mx:RadioButtonGroup>
</mx:FormItem>
参考文献:
1.用 Validator组件检测必填项. http://blog.csdn.net/zzr173/archive/2008/09/14/2842409.aspx
2.批量检查 validator. http://blog.csdn.net/supsteven/archive/2009/04/11/4062882.aspx
3.一个让 validator验证时,立即出现tooltip的小方法. http://blog.csdn.net/supsteven/archive/2009/04/15/4076343.aspx
4.flex 的数据验证. http://blog.csdn.net/turkeyzhou/archive/2008/11/29/3397172.aspx
发表评论
-
flex xml转ArrayCollection
2011-10-17 15:51 11391.xml文件数据样式: <MyDataList> ... -
flex TabNavigator的标签页默认是点击后才初始化
2011-09-01 17:20 977TabNavigator的标签页默认是点击后才初始化。所以,如 ... -
FLex3中弹出窗口包含TabNavigator时标签页的标题显示不完全的问题及解决方法
2011-04-07 14:53 2322解决方法有3种: 1.增加样式activeTabStyle并 ... -
Flex操作颜色值及图像颜色变换
2011-02-17 11:21 1036根据色彩值分离出单 ... -
Flex session相关操作
2011-02-15 16:53 8881.写 session mxml 文件 加 <mx: ... -
flex 和javascript互相调用
2011-02-15 16:50 877一、flex 调用javascript 只需使用静态的Ext ... -
通过页面传递参数到flex中的几种方法
2010-07-14 15:27 9711.在和中设置flashVars参数,例如: < ... -
解决Flex从页面 URL里获取参数的问题
2010-07-14 15:19 11771:当用http://xxxxx/xxx.mxml?name= ... -
flex builder 4 注册码可用破解
2010-07-08 10:03 4479破解flex builder 4的方法只需两步: 1. 注册 ... -
ISO Latin-1字符集(HTML实体对照)-在Flex Tooltip中换行
2010-07-06 17:17 1200Flex帮助告诉我们,要在MXML的属性中使用特殊字符,可以使 ... -
Flex中UI组件拖拽的三种实现
2009-11-12 16:04 1058一、最简单的是直接调用ui组件的startDrag方法和sto ... -
flex 网站大全
2009-11-09 15:40 1700一、国外站点 1.资源网站 Adobe Labs : ... -
Flex 读取XML配置文件总结
2009-11-09 15:36 2714在Flex中我们经常使用x ... -
Flex事件讲解(三)
2009-11-09 15:26 806三.绑定机制在我们了解了事件机制后,那么理解绑定就不难了。绑定 ... -
Flex事件讲解(二)
2009-11-09 15:24 9222. 事件注册通道上面说 ... -
Flex事件讲解(一)
2009-11-09 15:11 789关于flex事件的讲解 一.引很多新人对Fle ... -
JAVA对象与AS间的转化关系对照表
2009-09-10 11:39 7861. 先是JAVA2AS 2. 下面是AS2JAVA的 ... -
Flex+J2EE+Lcds在myEclipse中的安装
2009-08-19 14:42 2579MyEclipse中安装FLEX插件 2009-05-22 ... -
myeclipse 中配置Flex + Spring + Hiberate + Struts
2009-08-19 13:51 2553在 myeclipse 中配置Flex + Spring + ... -
Flex组件——Alert应用
2009-08-19 10:56 1201Alert组件使用方法,通过Alert.show(...... ...
相关推荐
flex 表单数据合法性验证flex 表单数据合法性验证flex 表单数据合法性验证flex 表单数据合法性验证
提供: 表单的验证 基本流程 和处理方法 小小例子
里面的每一项我都试验过 直接复制到flex就能看到效果
概念验证项目,用于研究从动态(可能是外部化的)源生成Flex表单的潜力,以减少开发常见表单功能的开发时间。 我以前使用过'control'类,以允许非技术用户在外部XML文件中配置表单验证参数,但是表单和模型仍然需要...
JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器,让表单开发简单而高效。 特性如下: 可视化配置页面 提供栅格布局,并采用...支持表单验证 快速获取表单数据 国际化支持
通过栅格进行表单布局,可以嵌套使用,支持 Flex,基本可覆盖复杂的表单布局场景。 自定义 提供自定义区域和自定义样式扩展,可以简单方便的自定义自己的表单。 高级组件 提供功能强大的高级组件,可适用在各种...
如何在一个表单内通过ToolTips来返映一个错误 15.7节. 如何使用正则表达式去定位电邮地址 15.8节. 如何使用正则表达式去验证信用卡号码 15.9节. 如何使用正则表达式来验证ISBN号 15.10节. 如何通过指定字符类...
形式生成器 ...支持表单验证 快速获取表单数据 支持 如果你发现了新的bug,或者有新的功能要求,请新建一个问题 浏览器支持 现代浏览器和Internet Explorer 10+。 IE浏览器/边缘 火狐浏览器 Chro
网页设计 期末大作业web课程设计【原神风格+博客静态页面】,html+css+js纯手写,div盒子布局,flex布局,瀑布流布局,绝对定位/相对定位,js登录表单验证,简洁的下拉菜单,侧边栏手风琴效果,动漫游戏博客小清新...
以完全声明的方式实现具有灵活样式和验证功能的任何Web表单 现场演示: : Stackblitz: ://stackblitz.com/edit/dashjoin 特征 支持JSON Schema Draft 6 可以从URL加载引用的架构 呈现紧凑形式 支持2路数据绑定 ...
创造形式 ...支持表单验证 快速获取表格数据 国际化支持 第三方插件 浏览器支持 现代浏览器和Internet Explorer 10+。 IE浏览器/边缘 火狐浏览器 Chrome合金 苹果浏览器 IE10,IE11,Edge 最近
html+css+js,多用flex布局,有轮播图、电梯、表单验证,适合学完js的人,可当练手,可当web期末作业,仅供参考
是一个小型的声明式表单扩展和 polyfill 库。 下载:[formx.min.js][full-min] 或 [formx.js][full] [凉亭][凉亭]: bower install formx [npm][npm]: npm install formx [组件][组件]: component install esha/...
CraueFormFlowBundle提供了一种在Symfony项目中构建和处理多步骤表单的功能。 特征: 导航(下一个,后退,重新开始) 步骤标签 跳过步骤 每个步骤都有不同的验证组 处理文件上传 动态步进导航(可选) 提交后...
block可以使用内联元素可以设置宽高,参考简易表单验证网易云课堂原生JS项目实战,表单验证技术栈:原生JS总结: viewport视窗大小自适应设置,参考布局模式之flex弹性布局,参考和min-height使用的替代是父级元素...
表单美化210311 实用css小集锦210312 Emmet210313 布局练习210314 flex实现⽔平垂直居中的最简单⽅式 flex实现双⻜翼布局 flex实现圣杯布局 瀑布流布局 模板引擎pug基本语法210315 布局练习(响应式布局)210316 ...
javascript复制到剪切板滚动加载图片生成随机字符串文件上传和下载动态字体大小元素是否在视口中限制输入滑动解锁常见表单验证UI代理LI拖拽交换商品规格组合工具提示滑块粘性导航条挪动足球 轮播轮播表格排序编辑...
在美国各地显示和编辑旅行记录的个人资料信息。 接受之前验证表单数据。使用HTML(网格,flex),JS(表单,输入,创建和删除元素,验证,键)和CSS(样式,布局,错误消息)。