EXT中有自带的验证,比如数字,EMAIL,URL等,这些验证都很好,只要加上VTYPE,指定验证的类型就可以使用了
比如
xtype:'textfield',
fieldLabel:'url',
vtype:'url',
vtypeText:'必须要以http://开头'
当您填写的URL不是指定的路径就会出错了,错误的内容就是“必须要以http://开头'”
如果创建自己的验证呢
如下所示:
Ext.apply(Ext.form.VTypes,{port:function(val,field){return checkPort(val.trim());}});
使用apply来附加验证类型到Ext.form.VTypes类里面,function(val,field)中的参数是规定好的
val是value,是应用验证的控件获得的值
field是对象,是当前应用的对象
field.confirmTo是绑定的对象,比如用在密码验证上就很有用(一般需要填写,密码,确认密码),如下
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;}}});
使用如下:
{
xtype:'textfield',
fieldLabel:'新密码',
name:'operatorNewPass',
id:'p_NewPassword',
width:150,
minLength:6,
minLengthText:'密码长度最少6位!',
maxLength:20,
maxLengthText:'密码长度最多20位!',
inputType:'password',
allowBlank:false
},{
xtype:'textfield',
fieldLabel:'确认密码',
name:'operatorConPass',
id:'p_ConfirmPassword',
width:150,
inputType:'password',
vtype:'password',
vtypeText:"两次密码不一致!",
confirmTo:'p_NewPassword',
allowBlank:false
}
现在大家可以去创建自己的验证了,在使用验证时候,一定要申明消息模式
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
//更改密码
changePassword = function(){
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;
}
}
});
var CPFormPanel = new Ext.FormPanel({
frame: true,
labelWidth: 75,
labelAlign: 'right',border:'0',
defaults: {width:160, xtype:"textfield",inputType:'password',allowBlank:false},
items:[
{fieldLabel:'输入旧密码',name:'OldPwd', maxLength:20,blankText : '密码为空!',maxLengthText:'密码长度不能超过20位!'},
{fieldLabel:'输入新密码',name:'NewPwdOne',id:'NewPwdOne',maxLength:20,blankText : '密码为空',maxLengthText:'密码长度不能超过20位!'},
{fieldLabel:'确认新密码',name:'NewPwdTwo',id:'NewPwdTwo',maxLength:20,blankText : '密码为空',maxLengthText:'密码长度不能超过20位!',vtype:'password',vtypeText:'两次密码不一致',confirmTo:'NewPwdOne'}
]
});