ExtJS 的表单验证机制(Form Validation)

在 Extjs 中，表单(form)提供了各种各样的验证机制和方法，在这里总结一下

在讲解表单验证前需要先说一下错误提示(Tips)的配置

在 Ext.onReady 中添加以下两行代码：

//初始化组件的信息提示功能
Ext.QuickTips.init();
//指示错误提示出现的方式
Ext.form.Field.prototype.msgTarget = 'under';      

msgTarget 可以是以下选项：
qtip      当鼠标移动到控件上面时显示提示
title     在浏览器的标题显示
under     在控件的底下显示提示 
side      在控件右边显示一个错误图标，鼠标指向图标时显示提示
id        提示显示在指定id的HTML元件中

各表单元素的提示方式也可以通过修改各项的 msgTarget 属性来配置

{  
    xtype      : 'textfield',  
    fieldLabel : '编号' ,  
    name       : 'id' ,  
    allowBlank : false ,  
    msgTarget  : 'qtip'  
}

  

各种各样的表单验证类型

1，空值验证

//是否允许空值
allowBlank : false
//发生空值错误时的提示
blankText : '不能为空'

2，长度限制

//最小长度限制和其错误提示
minLength : Number 
minLengthText : String
//最大长度限制和其错误提示 
maxLength : Number 
maxLengthText : String

3，vtype验证

vtype : 'email' 
vtypeText : '不是有效的邮箱地址'

其中 vtype 的可选：
1. alpha       //只能输入字母，无法输入其他（如数字，特殊符号等）  
2. alphanum    //只能输入字母和数字，无法输入其他  
3. email       //email验证，要求的格式是 "[email protected]"  
4. url         //url格式验证，要求的格式是 http://www.langsin.com

4，自定义vtype验证器

//先用 Ext.apply 方法添加自定义的 password 验证器  
Ext.apply(Ext.form.VTypes,{  
    password : function(val,field){             //val指的是文本框的值，field指的是文本框组件
        if(field.confirmTo){                    //confirmTo是我自定义的配置参数，一般用来保存另一个组件的id  
            var pwd=Ext.get(field.confirmTo);   //取得confirmTo组件的值  
            return (val==pwd.getValue());  
        }  
        return true;  
    }  
});
//配置items参数  
items:[  
    {  
        fieldLabel  : "密码",  
        id          : "pass1",  
    },{  
        fieldLabel  : "确认密码",  
        id          : "pass2",  
        vtype       : "password",//自定义的验证类型  
        vtypeText   : "两次密码不一致！",  
        confirmTo   : "pass1",//要比较的另外一个的组件的id  
    }  
]

5，使用正则表达式 RegExp

//js的正则表达式放在 /...../ 之间；[/u4e00-/u9fa5]表示只能输入中文
regex       : /[/u4e00-/u9fa5]/,    
regexText   : "只能输入中文!",