`

Extjs Vtype 基础学习

ext 
阅读更多
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扩展,方便验证!

    extjs 常用vtype 代码

    extjs 常用vtype 代码 Ext.VTyps常用vtype大全!

    extjs增删改查典型案例

    vtype:'specialChar', anchor:'80%' } },{ columnWidth:'.8', items:{ name:'userInfo.userName', hiddenName:'userInfo.userName', xtype:'textField', fieldLabel:'用户姓名*</font>', labelSeparator:'...

    extjs xtype

    4. `component` - `Ext.Component`:基础组件,所有EXTJS组件的基类。 5. `container` - `Ext.Container`:容器组件,用于包含其他组件。 6. `cycle` - `Ext.CycleButton`:循环按钮,可以在多个值之间切换。 7. `...

    extjs表单验证特殊字符

    EXTJS表单验证主要依赖于`Ext.form.field.Base`组件,它是所有表单字段的基础类。每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的...

    extjs实践大量实例讲解

    下面我们将通过一系列具体示例来逐步学习 ExtJS 的使用方法: ### 示例 1:创建一个简单的窗口 ```javascript Ext.create('Ext.window.Window', { title: 'Hello ExtJS', width: 400, height: 200, layout: '...

    extjs属性方法大全

    - `vtype`: 验证类型,如 `alpha`(字母)、`alphanum`(字母数字)、`email`、`url` 等。 - `vtypeText`: 验证失败时的错误提示。 - `validator`: 自定义验证器函数。 - **事件:** - `selectOnFocus`: 获取...

    Extjs 提示和正则表达式

    一、正则表达式基础 1. **基本元素**:正则表达式由一些基本字符构成,如`.`匹配任意字符,`^`表示行的开始,`$`表示行的结束,`*`表示前面的字符可以出现零次或多次,`+`表示前面的字符至少出现一次,`?`表示前面...

    Extjs验证表单 Extjs验证表单

    本文将深入探讨Extjs中的表单验证机制,包括错误信息提示方式、内置验证属性、Vtype验证以及自定义验证方法。 #### 二、Extjs 错误信息提示方式 在进行任何形式的验证之前,首先需要配置错误信息的提示方式。Extjs...

    extjs与系统切分模块设计

    ### ExtJS与系统切分模块设计 #### 一、ExtJS简介 ExtJS是一个非常流行的JavaScript框架,旨在帮助开发者快速创建高性能的Web应用程序界面。它提供了丰富的用户界面组件,包括表格(Grid)、树形结构(Tree)、...

    ExtJSWeb应用程序开发指南(第2版)

    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总结.pdf

    2. **ext-base.js** - 包含 EXTJS 的核心功能,相当于整个框架的基础和引擎。可以通过修改此文件来集成其他库,例如 jQuery,以实现与 EXTJS 的协同工作。 3. **ext-all-bug.js / ext-all.js** - 这两个文件包含了...

    ExtJS3总结内容

    ### ExtJS3总结内容:深入理解xtype与vtype #### 概述 在ExtJS3框架中,`xtype`与`vtype`是两个关键的概念,它们分别用于组件类型的标识和表单验证规则的定义。本文将详细介绍`xtype`的使用,以及其在ExtJS3组件...

    初试extJs,控件

    表单中的 `xtype:'textfield'` 表示创建的是一个文本输入框,`vtype:'specialChar'` 可能是一个自定义验证类型,用于限制输入字符的特殊规则。`anchor:'80%'` 设置了控件在容器中的宽度占80%。此外,表单还包括了三...

    Extjs属性大全

    - **vtype**:自定义验证类型,例如: - `alpha`:只允许字母。 - `alphanum`:只允许字母和数字。 - `email`:电子邮件地址格式。 - `url`:URL地址格式。 - **vtypeText**:验证失败时显示的消息。 - **...

    Extjs表单常见验证小结

    总结来说,ExtJS表单验证提供了丰富的选项,从基础的空验证和简单的vtype验证,到自定义函数验证和正则表达式验证,几乎可以覆盖所有常见的验证需求。通过这些验证方式,开发者可以确保用户输入的数据既安全又符合...

    Extjs页面验证

    首先,ExtJS提供了多种内置的验证方法和组件属性,例如`vtype`和`fieldValidator`,用于在用户提交表单前验证字段内容。`vtype`是预定义的验证类型,如邮箱、数字等,可以简单快速地设置字段的验证规则。例如,对于...

    Jquery、YUI、ExtJs 三大javascript框架表单验证带提示功能的demo

    它的表单验证功能强大且全面,提供了内置的表单字段验证器,如`vtype`属性可以设置预定义的验证类型,如`email`、`url`等。另外,还可以通过`field.validator`定义自定义验证函数。ExtJS的错误提示系统允许开发者...

    ext form小例子

    在“EXT form小例子”中,我们将探讨EXTJS Form组件的基础用法,包括客户端验证和对`Ext.form.Vtype`的扩展。 1. EXTJS Form组件基础: - 表单创建:EXTJS中的表单通常通过`Ext.create`方法创建,如`Ext.create('...

    学习ExtJS form布局

    ExtJS 提供了强大的表单验证机制,每个表单字段可以有自己的验证规则,例如`vtype`属性可以设定字段的验证类型,`allowBlank`用来控制字段是否允许为空。`FormPanel`对象也提供了`getForm()`方法获取表单实例,可以...

Global site tag (gtag.js) - Google Analytics