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.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，示例如下：

 

	// 修改密码窗体定义
	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();指定统一提示错误消息，否则可能错误消息不显示。