转自:http://blog.sina.com.cn/s/blog_7778950d0100y2pg.html

本文我们主要探讨一下EXTJS的Form中验证的问题,可能用过EXTJS的Form的人都知道,比如说,我们在为Form中的TextField添加验证的时候,我们一般会用到两个属性,一个是invalidText,另一个是MaskRe,第一个属性我们用来设置,当用户输入的信息,验证不通过时,我们展现给用户的提示信息,第二个属性设置我们输入的一个规则。该属性的值为一个正则表达式。在一般的情况下,我们一般用这两个属性,就足够了,但是。很多特殊的情况,这两个属性就用起来没那么方便了,比如说,我们现在form表单中有10个字段,其中有五个字段。我们是数字格式,也就说,这个五个我们使用同一种验证规则,在这样的情况下,我们要是使用上述的方式,来验证的话,我们的编码量就会增加。要是我们能把验证的规则提取出来,这样就可以很好的重用了,又有利于代码的维护。这个时候,我们就会用到form里边的VTypes了。下面,我们来看一下,这个属性的具体使用。

1、首先我们来定义一个Vtype,以便于我们字段中使用。定义的方式如下:

var test=/^[0-9]+$/i;   //定义一个正则表达式对象

Ext.apply(Ext.form.VTypes, {
   
numbers:
function(val,
field)
{
       
return
test.test(val);

},
   
numbersText:
'Not a valid time.  Must be in the format
"12:34 PM".',
    numbersMask:
/[\d]/i
});

上述代码我们就定义好了一个名字为numbers的vtype,function返回验证的结果,numbersText定义验证不通过时的提示信息。numbersMask为一个正则表达式,用于验证用户的输入。他在numbers的function之前执行。

2、定义好vtype以后,我们就可以使用它了。使用方式如下:

var textfield=new
Ext.form.TextField({

   

   
fieldLabel:"总数",

   

   
vtype:"numbers"

});

在form的组件中,都会有一个vtype属性,用于指定指定该组件的vtype验证名称。这样。所有关于数字验证的字段,我们就都可以使用numbers验证了。

大家有好的使用方式,欢迎大家留言。我们共同学习进步。谢谢。

93.EXTJS Form之VTypes的更多相关文章

  1. Extjs Form用法详解(适用于Extjs5)

    Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Ex ...

  2. 2014年12月20日00:33:14-遮罩+进度条-extjs form.isvalid

    1.Extjs : 遮罩+进度条 2.Extjs: extjs form.isvalid http://stackoverflow.com/questions/19354433/extjs-form- ...

  3. 实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值

    上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...

  4. 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据

    ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...

  5. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  6. Extjs form 表单的 submit

    说明:extjs form表单的提交方式是多种多样的,本文只是介绍其中的一种方法,本文介绍的方法可能不是完美的,但是对于一般的应用应该是没有问题的.     本文包括的主要内容有:form面板设计.f ...

  7. js进阶-9-3/4 form对象有哪些常用属性

    js进阶-9-3/4 form对象有哪些常用属性 一.总结 一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...

  8. extjs form.load()加载服务端数据

    formPanel.getForm().load({ url: 'getApproveRefundInf?refundIdDetail=${refundIdDetail}', waitMsg: '请稍 ...

  9. extjs form 取值 赋值 重置

    一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...

随机推荐

  1. seam的定时轮巡

    青岛的项目要做一个功能,每天凌晨2点的时候保存一次设备数据,这个就要求项目能够间隔24小时每天去做这个事,是一个自主轮巡. seam框架正好提供了这个功能,@Expiration指定开始时间,@Int ...

  2. 黑苹果开启retina,大分辨率的方法

    首先,管理分辨率RDM的软件这里下载: http://pan.baidu.com/s/1bpjL07P 在终端输入: curl -o ~/enable-HiDPI.sh https://raw.git ...

  3. Capture the Flag ZOJ - 3879(模拟题)

    In computer security, Capture the Flag (CTF) is a computer security competition. CTF contests are us ...

  4. axios请求中跨域及post请求问题解决方案

    闲话不多说,用到vue的童鞋们应该大部分都会遇到请求中的各种奇葩问题,昨天研究一天,终于搞出来个所以然了,写篇文章拯救一下广大的童鞋们,某度娘当然也可以搜到,但一般解决了一个问题后就会出现另外一个问题 ...

  5. C#学习笔记_10_设计模式&继承&多态

    10_设计模式&继承&多态 设计模式 由前人总结的用来解决特定问题的解决方案 单例模式 在一个项目的不同模块中获取对象,获取到的是同一个对象 代码 继承 概念:如果多个类中具有相同的字 ...

  6. Boa服务器编译移植

    Boa服务器移植 Boa是一种非常小巧的Web服务器,其可执行代码只有大约60KB左右.作为一种单任务Web服务器,Boa只能依次完成用户的请求,而不会fork出新的进程来处理并发连接请求.但Boa支 ...

  7. Vue中数据的处理

    临时变量参数的存储 1.引用类型和值类型的差异,及存储 2.在项目中做的绑定值,首先v-model 存储到临时变量,同时把数据在提交到api之前,需要做处理,因为是引用类型的数据,在处理之前,会修改掉 ...

  8. CodeForces - 284C - Cows and Sequence

    先上题目: C. Cows and Sequence time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  9. CODEVS1079 回家 (最短路)

    真是语死早,题目看了两遍才看懂. 按照题目要求建边,从'Z'开始跑最短路即可. Program CODEVS1079; ..,..] of longint; d:..] of longint; pd: ...

  10. [bzoj2648/2716]SJY摆棋子_KD-Tree

    SJY摆旗子 bzoj-2648 题目大意:平面上有n个黑子.有m个操作,可以下一颗白子,查询与曼哈顿距离下最近黑子之间的曼哈顿距离,或者下一颗黑子. 注释:$1\le n,m\le 5\cdot 1 ...