ExtJS 验证
Extjs学习之Extjs验证
wenjianping 2009-12-7
首先要明确，验证的对象是什么呢？是表单，对使用系统的客户的输入进行限定。验证可以使用js提供的脚本来进行代码编写，但ext本身对表单进行了封装，并允许客户对其进行扩展，因此使用Extjs提供的验证能够大大简化验证判断。
1. Extjs错误信息提示方式
本来应该先写验证再写提示，但考虑到提示信息使用的相对简单性，在系统的js公共文件中初始化一次即可，因此将此提前。

在验证之前，先看下面两个语句：
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget= "qtip";//提示的方式，枚举值为"qtip","title","under","side",id(元素id)

在第一行中对提示信息进行初始化，第二行定义所有表单的Field域提示信息为"qtip"方式提示。Ext.form.Field.prototype表示将msgTarget定义到field域的原型上。因此在使用field域时属性msgTarget都已经初始化为"qtip"方式了。
"qtip"方式显示效果如下：

2. Extjs验证
1) 使用Extjs的regex指定验证的正则表达式，regexText指定验证不通过时的提示信息，如下：
items:{
id:"ipAddress",
name:"ipAddress",
xtype:'textfield',
fieldLabel:'IP地址',
allowBlank:true,//不允许为空
regex:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
regexText:'必须是合适的IP地址',
anchor:'90%'
}
当使用的为非ip地址时，在错误提示信息中会提示regexText的值：'必须是合适的IP地址'。
2) 使用Extjs内置属性进行验证
Extjs内置allowBlank，maxlength,minlength等属性，可以对输入内容进行限制，如果不符合，会生成错误提示。如上一段代码中的allowBlank设置为false,则当输入内容为空时会生成错误提示。
3) 使用Vtype进行验证
Extjs内置了四种验证方式，如下：
//form验证中vtype的默认支持类型
1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum//只能输入字母和数字，无法输入其他
3.email//email验证，要求的格式是"langsin@gmail.com"
4.url//url格式验证，要求的格式是http://www.langsin.com

items:{
id:" email",
name:"ipAddress",
xtype:'textfield',
fieldLabel:'email地址',
allowBlank:true,//不允许为空
vtype:"email",
vtypeText:'必须是合适的email地址2',
anchor:'90%'
}
当输入的内容不是正确的email地址时，会生成错误提示信息
4) 自定义Vtype扩展验证
①简单定义函数
自定义Vtype时，实际使用js语言，因此此部分是最大最广泛的，可以使用语言的任何特性。首先要扩展Ext.form.VTypes，然后在使用时调用扩展方法。如下：
Ext.apply(Ext.form.VTypes,
{
        integer : function(val, field)
        {
            var exp = /^([1-9]\d{0,7}|0)$/;
            return val.match(exp);
        },
integerText : '您输入的必须为数字！',
其中val为文体框中的值，field 为文本框所在的组件；integer为定义的验证方法，integerText为默认的提示信息，在调用时可以通过指定vtypeText来覆盖此定义。
②定义验证函数及提示信息
Ext.apply(Ext.form.VTypes,
{
        integer : function(val, field)
        {
            var exp = /^([1-9]\d{0,7}|0)$/;
field.vtypeText = '您输入的必须为数字！';//此处输入其他提示信息
            return val.match(exp);
},
此处指定的vtypeText值是动态运行是设置的，会覆盖调用时指定的vtypeText值
③定义传值对象及组合验证
在ext的vtype中指定的方法是可以传入自定义参数。如下定义的验证方法:

Ext.apply(Ext.form.VTypes,
{

commonValidate : function(val,field)
{
var attr = field.vlist.split('$');//此处field.vlist即为定义的vlist
for(var i=0;i<attr.length;i++){
var functionName = attr[i];
if(!eval("Ext.form.VTypes."+functionName+"(val,field)")){
return eval("Ext.form.VTypes."+functionName+"(val,field)");
}
}
return true;
        }
而在调用时如下:
items:{
xtype:'textfield',
fieldLabel:'单位名称',
lengthRange:{min:'0', max:'50'},// lengthRange中方法参数
vtype:'commonValidate',//调用commonValidtate方法
vlist:"lengthRange$specialChar",//传入方法参数
anchor:'90%'
}

如上调用，vlist为自定义的属性值（js语法决定可以直接在类中增加属性）,在vtype方法中通过field.vlist来获取传入值。而lengthRange方法又通过获取lengthRange中的值来获取参数
lengthRange : function(val, field)
        {
            var minLength = 0;
          &