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();指定统一提示错误消息，否则可能错误消息不显示。