`
pizazz_ex
  • 浏览: 20208 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

通用的表单验证组件

阅读更多
一个通用的表单验证组件,可以根据验证类型自行扩展,可以被动验证和主动验证。需要用到方法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 validate 通用表单验证组件(带Tips提示)

    内容索引:脚本资源,jQuery,表单验证,Tip 虽然这功能很简单,但想在网上找到适合自己使用的还真不多,这一款表单验证组件是根据网上的整理完善的,从调用速度上来说,比较快,而且加入了动画效果的TIP提示,整体感觉...

    Vue快速实现通用表单验证的示例代码

    本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...

    web前段通用验证器common-validator-2.0.js

    一款灵活通用的JavaScript验证组件,支持灵活多样的验证方式。 此为2.0版本,是在1.0基础架构上做了全新的调整, 希望能通过这个JS验证器小组件为我们码农们提供微小的帮助。 1、启用创建Validator方式,不再使用...

    Axure WEB端交互原型通用组件模板库 v3.2 (Axure RP9作品).zip

    组件仍然是这套作品的核心内容,这套作品的组件由通用组件、数据录入、数据展示、信息反馈、其它系列五个大类的70多种类型和数千个独立组件组成。新版的组件类型依然基本跟旧版本保持一致,但是我们对80%以上的独立...

    Web前段通用验证器框架

    是一款简单易用的web前段验证组件。 2.0是在1.0基础架构上做了全新的调整, 希望能通过这个JS验证器小组件为我们码农们提供微小的帮助。 1、启用创建Validator方式,不再使用旧的静态方式。 2、加入多模式验证规则...

    Vue快速实现通用表单验证功能

    本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...

    Ext中表单中各种组件的布局

    Ext中表单中各种组件的布局,例如TextField,Combox,还有DateField控件的基本使用

    Axure WEB端通用组件交互规范手册 (Axure RP9作品).zip

    对于形式复杂或字段较多的表单验证及反馈效果同样不建议在原型中实现,相关反馈提示可以以标注的方式进行说明,本手册中也提供了关于表单验证反馈的示例。本手册可以应用于任何的WEB类项目原型,在实际应用可以根据...

    Vue快速实现通用表单验证的方法

    本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...

    基于Vue3的可视化低代码form表单设计器.zip

    等等等等public ├─mock // 模拟数据src ├─api // 数据请求接口 ├─docs // 使用说明文档 └─views // 页面 ├─designForm // 表单设计主程序组件 ├─components // 核心组件 ├─form.vue // 通用表单新增/...

    通用权限系统-中台组件化

    对于企业中的项目绝大多数都需要进行用户权限管理、认证、鉴权、加密、解密... 本项目同时也是一个微服务开发框架,集成了基础的公共组件,包括数据库、缓存、日志、表单验证、对象转换、防注入和接口文档管理等工具。

    react-material-ui-universal-form:具有材料UI库的React的通用表单(带有验证)

    用React with Material UI编写的通用表单(带有验证) 弗拉基米尔·扬科维奇(Vladimir Jankovic) 这是通用的,可自定义的表单,其中包含使用React with Material UI库编写的字段验证。 主要特点是: 将对象定义...

    详解SpringBoot构建的Web项目如何在服务端校验表单输入

    主要介绍了详解SpringBoot构建的Web项目如何在服务端校验表单输入,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    React Form组件的实现封装杂谈

    前言 对于网页系统来说,表单提交是一种很常见的与用户交互的方式,比如提交订单的时候,需要输入收件... 封装表单验证&错误提示 表单提交 下面将对每个部分的实现方式做详细介绍。 表单布局 常用的表单布局一般有3种

    form-create-具有动态呈现,数据收集,验证和提交功能的表单构建器,支持json数据-Vue.js开发

    结合内置的17种通用表单组件和自定义组件,可以轻松处理复杂的表单。 中文自述文件支持iViewUI 2.13.0+ iViewUI 3.x iViewUI 4.x ElementUI 2.8.2+ Ant-design-vue 1.5.3+如果您有适合表单创建的表单组件,请随时...

    senior-2:react实现表单提交验证-hook-高阶组件

    Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何...

    om-inputs:通用的Om组件来处理输入

    ClojureScript库,可生成Om / React表单您只需在Internet上所有最重要的内容列表中找到以下内容: 表格通常是重要内容的经纪人项目目标使用生成具有规范的表单。 提供最佳实践UX 除了React.js之外,不使用任何外部JS...

    react-common:React.js 的通用组件和实用程序

    React.js 的通用组件和实用程序使用 ES6/7 语法。组件值验证组件应验证的表单字段的抽象组件。 这应该是一个 Mixin,但 Mixin 。

    Lotus.Domino.Web编程

    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+Material的轻量级响应式后台管理系统模板框架

    本文分享的是一套基于Bootstrap 4的精美的响应式后台管理系统模板。 它是一款流行的开源的WEB应用程序后台系统模板。... 该模板实现了所有的Bootstrap组件并且还重新定义了许多通用的... 表单验证功能; 丰富的图形控件

Global site tag (gtag.js) - Google Analytics