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:'...
4. `component` - `Ext.Component`:基础组件,所有EXTJS组件的基类。 5. `container` - `Ext.Container`:容器组件,用于包含其他组件。 6. `cycle` - `Ext.CycleButton`:循环按钮,可以在多个值之间切换。 7. `...
EXTJS表单验证主要依赖于`Ext.form.field.Base`组件,它是所有表单字段的基础类。每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的...
下面我们将通过一系列具体示例来逐步学习 ExtJS 的使用方法: ### 示例 1:创建一个简单的窗口 ```javascript Ext.create('Ext.window.Window', { title: 'Hello ExtJS', width: 400, height: 200, layout: '...
- `vtype`: 验证类型,如 `alpha`(字母)、`alphanum`(字母数字)、`email`、`url` 等。 - `vtypeText`: 验证失败时的错误提示。 - `validator`: 自定义验证器函数。 - **事件:** - `selectOnFocus`: 获取...
一、正则表达式基础 1. **基本元素**:正则表达式由一些基本字符构成,如`.`匹配任意字符,`^`表示行的开始,`$`表示行的结束,`*`表示前面的字符可以出现零次或多次,`+`表示前面的字符至少出现一次,`?`表示前面...
本文将深入探讨Extjs中的表单验证机制,包括错误信息提示方式、内置验证属性、Vtype验证以及自定义验证方法。 #### 二、Extjs 错误信息提示方式 在进行任何形式的验证之前,首先需要配置错误信息的提示方式。Extjs...
### ExtJS与系统切分模块设计 #### 一、ExtJS简介 ExtJS是一个非常流行的JavaScript框架,旨在帮助开发者快速创建高性能的Web应用程序界面。它提供了丰富的用户界面组件,包括表格(Grid)、树形结构(Tree)、...
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 ...
2. **ext-base.js** - 包含 EXTJS 的核心功能,相当于整个框架的基础和引擎。可以通过修改此文件来集成其他库,例如 jQuery,以实现与 EXTJS 的协同工作。 3. **ext-all-bug.js / ext-all.js** - 这两个文件包含了...
### ExtJS3总结内容:深入理解xtype与vtype #### 概述 在ExtJS3框架中,`xtype`与`vtype`是两个关键的概念,它们分别用于组件类型的标识和表单验证规则的定义。本文将详细介绍`xtype`的使用,以及其在ExtJS3组件...
表单中的 `xtype:'textfield'` 表示创建的是一个文本输入框,`vtype:'specialChar'` 可能是一个自定义验证类型,用于限制输入字符的特殊规则。`anchor:'80%'` 设置了控件在容器中的宽度占80%。此外,表单还包括了三...
- **vtype**:自定义验证类型,例如: - `alpha`:只允许字母。 - `alphanum`:只允许字母和数字。 - `email`:电子邮件地址格式。 - `url`:URL地址格式。 - **vtypeText**:验证失败时显示的消息。 - **...
总结来说,ExtJS表单验证提供了丰富的选项,从基础的空验证和简单的vtype验证,到自定义函数验证和正则表达式验证,几乎可以覆盖所有常见的验证需求。通过这些验证方式,开发者可以确保用户输入的数据既安全又符合...
首先,ExtJS提供了多种内置的验证方法和组件属性,例如`vtype`和`fieldValidator`,用于在用户提交表单前验证字段内容。`vtype`是预定义的验证类型,如邮箱、数字等,可以简单快速地设置字段的验证规则。例如,对于...
它的表单验证功能强大且全面,提供了内置的表单字段验证器,如`vtype`属性可以设置预定义的验证类型,如`email`、`url`等。另外,还可以通过`field.validator`定义自定义验证函数。ExtJS的错误提示系统允许开发者...
在“EXT form小例子”中,我们将探讨EXTJS Form组件的基础用法,包括客户端验证和对`Ext.form.Vtype`的扩展。 1. EXTJS Form组件基础: - 表单创建:EXTJS中的表单通常通过`Ext.create`方法创建,如`Ext.create('...
ExtJS 提供了强大的表单验证机制,每个表单字段可以有自己的验证规则,例如`vtype`属性可以设定字段的验证类型,`allowBlank`用来控制字段是否允许为空。`FormPanel`对象也提供了`getForm()`方法获取表单实例,可以...