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

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