Extjs Vtype 基础学习

EXT2.0  Vtype中实现了四种基本验证方式：
1.alpha 验证是否包含除字母之外的其他字符
2.alphanum 验证是否包含除字母和数字之外的其他字符。
3.email  验证是否是有效的email地址。
4. url 验证是否为有效的url地址格式
============================================================
如果需要使用Vtype做一些更为复杂的验证，可以自己定义新的验证方式，格式如下：

Ext.apply(Ext.form.VTypes,{
funName: function(value){

}
});

================================================================================
funName为Vtype验证的方法名，function(value)里面写具体验证的实现。下面提供一个实现新密码重复验证的Vtype验证方法实例，首先扩展Vtype验证方式：
Ext代码  收藏代码
//密码确认验证 
Ext.apply(Ext.form.VTypes, { 
    password : function(val, field) { 
        if (field.confirmTo) { 
                     //得到被绑定验证的输入框 
            var pwd = Ext.get(field.confirmTo); 
                     //判断两次输入的值是否相等 
            if (val.trim() == pwd.getValue().trim()) { 
                return true; 
            } else { 
                return false; 
            } 
            return false; 
        } 
    } 
}); 
    接着，在需要做密码重复验证的地方加入该Vtype，示例如下：

Extjs代码  收藏代码
// 修改密码窗体定义 
var passwordForm = new Ext.FormPanel({ 
    title : '密码修改', 
    labelAlign : 'right', 
    labelWidth : 80, 
    frame : true, 
    autoHeight : true, 
    monitorValid:true, 
    items : [ { 
        xtype : 'textfield', 
        inputType : 'password', 
        fieldLabel : '旧密码', 
        name : 'oldPassword', 
        allowBlank : false, 
        blanktext : '请输入原先的密码' 
    }, { 
        xtype : 'textfield', 
        inputType : 'password', 
        fieldLabel : '新密码', 
        name : 'password', 
        id : 'password', 
        minLength:5, 
        allowBlank : false, 
        blanktext : '密码不能为空' 
    }, { 
        xtype : 'textfield', 
        inputType : 'password', 
        minLength:5, 
        fieldLabel : '重复新密码', 
        name : 'passwordRepeat', 
        allowBlank : false, 
        blanktext : '请重复一遍新密码', 
        vtype : 'password',  //这里绑定刚才实现的Vtype 
        vtypeText : "两次密码不一致！", 
        confirmTo : 'password'   
    } ], 
    buttons : [{ 
        text :'修改', 
        formBind : true, 
        handler :function(){ 
            passwordForm.getForm().submit({ 
                url : 'changePassword.do', 
                success : function(f, action) { 
                    Ext.Msg.alert('成功','密码修改成功'); 
                    passwordWin.hide(); 
                    usergrid.getStore().reload(); 
                    passwordForm.getForm().reset(); 
                }, 
                failure : function() { 
                    Ext.Msg.alert('错误', "修改失败！"); 
                } 
            }); 
        } 
    }] 
 
}); 



另外在使用Vtype进行验证的时候需要注意，在使用之前应该在Ext.onReady语句后面加入Ext.QuickTips.init();指定统一提示错误消息，否则可能错误消息不显示。