一个通用的表单验证组件,可以根据验证类型自行扩展,可以被动验证和主动验证。需要用到方法ParamUtil.setParam(已贴出)
组件代码:
package pizazz.flex4.manager{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
import mx.validators.EmailValidator;
import mx.validators.NumberValidator;
import mx.validators.StringValidator;
import mx.validators.Validator;
import pizazz.flex4.utility.ParamUtil;
import spark.components.Button;
public class Validators{
private var _btn:Button;
private var _isClick:Boolean = false;
private var _allV:Array;
private var _strV:StringValidator;
private var _numV:NumberValidator;
private var _emailV:EmailValidator;
public function Validators(btn:Button = null){
if(btn){
_btn = btn;
_isClick = true;
}
_allV = new Array();
}
public function setOtherValidator(param:Validator):void{
_allV.push(param);
}
private function common(param:Validator, item:Object):void{
param.source = item["source"];
param.property = item["property"];
if (_isClick){
param.trigger = _btn;
param.triggerEvent = MouseEvent.CLICK;
}
_allV.push(param);
}
public function valString2Text(event:Event, isNull:Boolean = false,
nullMsg:String = null, minNum:Object = NaN, maxNum:Object = NaN,
minMsg:String = null, maxMsg:String = null):void{
_strV = new StringValidator();
ParamUtil.setParam(_strV, {
"required": !isNull,
"requiredFieldError": nullMsg,
"minLength": minNum,
"maxLength": maxNum,
"tooShortError": minMsg,
"tooLongError": maxMsg
});
common(_strV, {"source": event.target, "property": "text"});
}
public function valNumber2Text(event:Event, isNull:Boolean = false,
nullMsg:String = null, minNum:Object = NaN,
maxNum:Object = NaN):void{
_numV = new NumberValidator();
ParamUtil.setParam(_numV, {
"required": !isNull,
"minValue": minNum,
"maxValue": maxNum,
"requiredFieldError": nullMsg
});
common(_numV, {"source": event.target, "property": "text"});
}
public function valEmail2Text(event:Event, isNull:Boolean = false,
nullMsg:String = null):void{
_emailV = new EmailValidator()
ParamUtil.setParam(_emailV, {
"required": !isNull,
"requiredFieldError": nullMsg
});
common(_emailV, {"source": event.target, "property": "text"});
}
public function submitValidator(msg:String = ""):Boolean{
var _arr:Array = Validator.validateAll(_allV);
if (_arr.length != 0){
if(msg == ""){
msg = "请确认输入的正确性和完整性";
}
Alert.show(msg);
return false;
}
return true;
}
}
}
组件执行:
<?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"
xmlns:component="pizazz.flex4.component.*"
minWidth="955" minHeight="600">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import pizazz.flex4.manager.Validators;
private const val:Validators = new Validators();
private function submit():void{
if(val.submitValidator()){
Alert.show("提交成功");
}
}
]]>
</fx:Script>
<mx:Form width="320" height="240">
<s:HGroup width="100%">
<mx:FormHeading label="表单" width="100%" />
<s:Button label="提交" click="submit()" />
</s:HGroup>
<mx:FormItem width="100%" label="名称" required="true">
<s:TextInput width="100%"
creationComplete="val.valString2Text(event, false, null, 1, 5)" />
</mx:FormItem>
<mx:FormItem width="100%" label="年龄">
<s:TextInput width="100%"
creationComplete="val.valNumber2Text(event, true)" />
</mx:FormItem>
<mx:FormItem width="100%" label="E-mail" required="true">
<s:TextInput width="100%"
creationComplete="val.valEmail2Text(event)" />
</mx:FormItem>
</mx:Form>
</s:Application>
视图:
- 大小: 2.6 KB
分享到:
相关推荐
内容索引:脚本资源,jQuery,表单验证,Tip 虽然这功能很简单,但想在网上找到适合自己使用的还真不多,这一款表单验证组件是根据网上的整理完善的,从调用速度上来说,比较快,而且加入了动画效果的TIP提示,整体感觉...
本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...
一款灵活通用的JavaScript验证组件,支持灵活多样的验证方式。 此为2.0版本,是在1.0基础架构上做了全新的调整, 希望能通过这个JS验证器小组件为我们码农们提供微小的帮助。 1、启用创建Validator方式,不再使用...
组件仍然是这套作品的核心内容,这套作品的组件由通用组件、数据录入、数据展示、信息反馈、其它系列五个大类的70多种类型和数千个独立组件组成。新版的组件类型依然基本跟旧版本保持一致,但是我们对80%以上的独立...
是一款简单易用的web前段验证组件。 2.0是在1.0基础架构上做了全新的调整, 希望能通过这个JS验证器小组件为我们码农们提供微小的帮助。 1、启用创建Validator方式,不再使用旧的静态方式。 2、加入多模式验证规则...
本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...
Ext中表单中各种组件的布局,例如TextField,Combox,还有DateField控件的基本使用
对于形式复杂或字段较多的表单验证及反馈效果同样不建议在原型中实现,相关反馈提示可以以标注的方式进行说明,本手册中也提供了关于表单验证反馈的示例。本手册可以应用于任何的WEB类项目原型,在实际应用可以根据...
本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...
等等等等public ├─mock // 模拟数据src ├─api // 数据请求接口 ├─docs // 使用说明文档 └─views // 页面 ├─designForm // 表单设计主程序组件 ├─components // 核心组件 ├─form.vue // 通用表单新增/...
对于企业中的项目绝大多数都需要进行用户权限管理、认证、鉴权、加密、解密... 本项目同时也是一个微服务开发框架,集成了基础的公共组件,包括数据库、缓存、日志、表单验证、对象转换、防注入和接口文档管理等工具。
用React with Material UI编写的通用表单(带有验证) 弗拉基米尔·扬科维奇(Vladimir Jankovic) 这是通用的,可自定义的表单,其中包含使用React with Material UI库编写的字段验证。 主要特点是: 将对象定义...
主要介绍了详解SpringBoot构建的Web项目如何在服务端校验表单输入,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前言 对于网页系统来说,表单提交是一种很常见的与用户交互的方式,比如提交订单的时候,需要输入收件... 封装表单验证&错误提示 表单提交 下面将对每个部分的实现方式做详细介绍。 表单布局 常用的表单布局一般有3种
结合内置的17种通用表单组件和自定义组件,可以轻松处理复杂的表单。 中文自述文件支持iViewUI 2.13.0+ iViewUI 3.x iViewUI 4.x ElementUI 2.8.2+ Ant-design-vue 1.5.3+如果您有适合表单创建的表单组件,请随时...
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何...
ClojureScript库,可生成Om / React表单您只需在Internet上所有最重要的内容列表中找到以下内容: 表格通常是重要内容的经纪人项目目标使用生成具有规范的表单。 提供最佳实践UX 除了React.js之外,不使用任何外部JS...
React.js 的通用组件和实用程序使用 ES6/7 语法。组件值验证组件应验证的表单字段的抽象组件。 这应该是一个 Mixin,但 Mixin 。
5.4 验证域:Expense Report表单 107 5.5 计算域的值:Expense Report表单(续) 109 5.6 显示域相关的帮助 110 5.7 控制帧的使用 112 5.8 填充动态列表框 114 5.9 例子:动态下载图像 117 5.10 例子:在一个滚动...
本文分享的是一套基于Bootstrap 4的精美的响应式后台管理系统模板。 它是一款流行的开源的WEB应用程序后台系统模板。... 该模板实现了所有的Bootstrap组件并且还重新定义了许多通用的... 表单验证功能; 丰富的图形控件