93.EXTJS Form之VTypes

转自: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验证了。

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

原文地址:https://www.cnblogs.com/sharpest/p/7704250.html