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();指定统一提示错误消息,否则可能错误消息不显示。
分享到:
相关推荐
Extjs表单VTYPE扩展,方便验证!
extjs 常用vtype 代码 Ext.VTyps常用vtype大全!
vtype:'specialChar', anchor:'80%' } },{ columnWidth:'.8', items:{ name:'userInfo.userName', hiddenName:'userInfo.userName', xtype:'textField', fieldLabel:'用户姓名*</font>', labelSeparator:'...
有关于ext的xtype,Ext.QuickTips.init(),几种extjs的vtype默认支持的验证
1.3 是否真的需要学习ExtJS 1.4 ExtJS4.0新特性 1.5 ExtJSUI组件基础 1.6 了解一下类似技术 1.7 本章小结 第2章 开始ExtJS之旅 2.1 认识ExtJS的开发包 2.2 也从Helloworld开始 2.3 ExtJS中的基本概念 2.4 ...
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.7.6. 使用后台返回的校验信息 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.3. fieldset...
现在才开始讲基础问题。 8.1. Ext.get 8.2. 要是我们想一下子获得一堆元素咋办? 8.3. DomHelper和Template动态生成html 8.3.1. DomHelper用来生成小片段 8.3.2. 批量生成还是需要Template模板 8.4. Ext.data...
现在才开始讲基础问题。 8.1. Ext.get 8.2. 要是我们想一下子获得一堆元素咋办? 8.3. DomHelper和Template动态生成html 8.3.1. DomHelper用来生成小片段 8.3.2. 批量生成还是需要Template模板 8.4. Ext.data命名...
二、去http://www.extjs.com/下载ext-2.3.0 三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4,取出解压后的文件夹,真接放到站点根目录,目录结构为: WEBROOT |--ckeditor |--finder |--ext-2.3.0 |--js |...