`
chembo
  • 浏览: 937410 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ext 表单验证

    博客分类:
  • ext
EXT 
阅读更多
我们可以通过定义item的vtype的类型做简单的表单验证。其中vtype支持的类型为:

1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
2.alphanum//只能输入字母和数字,无法输入其他
3.email//email验证
4.url//url格式验证,要求的格式是http://开头的

很多人会问为什么没有只是输入数字的,其实通过定义item的xtype=numberfield就可以做到了。

下面举个自定义验证规则为比较两次密码是否相等的验证:
//先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
Ext.apply(Ext.form.VTypes,{
    password:function(val,field){//val指这里的文本框值,field指这个文本框组件
       if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值
           var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
           return (val==pwd.getValue());
       }
       return true;
    }
});
//配置items参数
items:[{fieldLabel:"密码",
                id:"pass1",
                anchor:"90%"
               },{
                fieldLabel:"确认密码",
                id:"pass2",
                vtype:"password",//自定义的验证类型
                  vtypeText:"两次密码不一致!",
                  confirmTo:"pass1",//要比较的另外一个的组件的id
                anchor:"90%"
               }
分享到:
评论

相关推荐

    EXT表单验证之TextField

    例如,对于`Ext_TextField表单验证.xls`文件,它可能是包含EXT表单验证示例的电子表格,详细列出了不同vtype的使用方法和效果,这对于学习和参考EXT表单验证非常有帮助。 总而言之,EXT表单验证中的TextField组件...

    EXT 表单验证EXT 表单验证

    EXT表单验证是EXT JS框架中的一个重要特性,用于在用户输入数据时确保数据的正确性和完整性。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计。它提供了丰富的组件库,包括表格、表单、菜单等,...

    ext表单

    EXT表单,是一种基于JavaScript和Ajax技术的富客户端(Rich Client)表单处理技术,它源自EXT JS库,专门用于构建交互性强、用户体验优秀的Web应用程序。EXT JS是一个强大的JavaScript库,提供了一系列组件化的UI...

    ext表单设计器,常用表单拖拉实现

    7. **表单验证**:内置的验证机制确保用户输入的数据符合预定规则,提高了数据的准确性和一致性。 8. **国际化支持**:表单元素的标签和提示信息可以轻松地进行多语言配置,适应全球化应用的需求。 EXT表单设计器...

    Ext Vtype 表单验证实现登陆

    Ext JS是一个强大的JavaScript框架,提供了丰富的组件和功能,包括复杂的表单验证机制。 首先,理解Vtype的概念。Vtype是Ext JS中的一种内置验证机制,用于对表单字段的输入值进行简单的验证。通过为表单字段设置...

    Ext 动态加载表单数据

    通过以上步骤,你可以实现动态加载Ext表单数据的功能。在实际应用中,可能还需要考虑错误处理、数据验证、动态更新等问题,但以上代码提供了一个基础的实现思路。不断学习和实践,你将能更好地掌握Ext JS在构建动态...

    Extjs验证表单 Extjs验证表单

    ### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...

    Ext表单组件之textField

    本篇我们主要关注"Ext表单组件之textField",它是最基础也是最常用的输入控件,用于接收用户的文本输入。 一、Ext.form.TextField简介 Ext.form.TextField是Ext JS中的一个核心组件,它允许用户在表单中输入单行...

    EXT4.3实现动态表单全动态

    表单字段和grid列可以设置验证规则,通过`Ext.form.field.VTypes`实现。 4. **实现全动态**: - **配置驱动**:通过JSON或其他数据格式定义表单和grid的布局、字段、列等信息,实现配置文件驱动的动态生成。 - **...

    Ext 入门 登陆验证表单提交

    本文将围绕“EXT入门:登陆验证表单提交”这一主题,深入探讨EXTJS中实现登录表单验证的基本步骤和原理。 EXTJS允许我们通过其丰富的组件库创建美观且功能丰富的表单,包括输入框、按钮等元素。在登录场景中,我们...

    Ext表单组件实现用户注册

    本篇文章将聚焦于如何使用Ext表单组件来实现用户注册的功能。 首先,我们来看看`form.html`。这是一个HTML文件,通常会包含一个基本的页面结构,以及引入Ext JS库的链接。它可能还会有一个`<script>`标签,用来加载...

    Ext教程表单表格的使用

    6. `monitorValid : true`: 启用客户端表单验证。 7. `collapsible : true`和`titleCollapse : true`允许表单面板折叠。 8. `reader`定义了一个JsonReader,用于解析从服务器返回的JSON数据,其中`root : 'data'`...

    ext 表单提交

    在Ext JS中,表单(`Ext.form.Panel`或`Ext.form.Basic`)包含一系列字段(`Ext.form.Field`),每个字段都有自己的验证规则。当用户填写并提交表单时,框架会自动执行这些验证。如果所有验证都通过,表单数据会被...

    EXT异步提交FORM表单

    ### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应...

    EXT提交表单,ASP.NET

    title: 'EXT表单', items: [ {xtype: 'textfield', name: 'username'}, {xtype: 'passwordfield', name: 'password'} ], buttons: [{ text: '提交', handler: function() { formPanel.getForm().submit({ ...

    纯手工打造类似Ext的验证效果

    "纯手工打造类似Ext的验证效果"这个主题聚焦于使用JavaScript进行表单验证,模仿流行的ExtJS库提供的验证功能。ExtJS是一款功能强大的JavaScript框架,它提供了丰富的组件和强大的数据绑定机制,包括复杂的表单验证...

    Ext 添加功能form表单实例

    综上所述,这个实例展示了如何在Ext中创建一个完整的表单,包括表单的布局、字段的定义及验证、按钮及事件处理等多个方面。对于初学者来说,这是一个很好的学习资源,可以帮助他们快速掌握如何使用Ext构建复杂的Web...

    Ext表单之loadRecord用法详解

    本文将深入探讨Ext表单中的`loadRecord`方法,这是一个非常实用的功能,用于将数据记录加载到表单中,以便用户可以查看或编辑。我们将通过`loadRecord`方法的使用场景、工作原理以及示例代码来详细讲解这个知识点。 ...

    Ext2.0 form使用实例的例程

    5. **验证(Validation)**:Ext 2.0提供了内置的验证机制,可以为每个表单字段设置验证规则,如必填、长度限制、格式检查等。验证错误会以提示信息的形式显示给用户。 6. **事件处理(Event Handling)**:通过...

Global site tag (gtag.js) - Google Analytics