`
zpball
  • 浏览: 919261 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS中表单验证使用自定义vtype(两次输入密码重复)示例

阅读更多
在ExtJS中,使用了四种自定义,分别是'alpha',alphanum,'email','url',分别用来验证表单中的值是否符合字母、字母数字、电子邮件、URL等格式。但在实际应用中,我们需要验证的格式或者规则还是很多的。由于ExtJS是开源的框架,因此,我们可以扩展vtype的功能,实现自定义的vtype。

    比如,在实战中,我们经常会遇到需要验证密码的问题,最常使用的,就是如何验证原密码跟重复密码是否一致的问题。为了实现这个功能,我们可以自定义一个vtype,命名为repetition。因此,或以编写扩展代码如下:
Ext.apply(Ext.form.VTypes, {
     repetition: function(val, field) {
      //代码逻辑在此
     },
     repetitionText: '两个指定组件的组件值不一样'
 })



Ext.apply方法,用以将新属性复制到原对象中,所以, 新的repetition,我们可以以一个JSON配置对象的形式,复制到Ext.form.VTypes中,借此扩展vtype的功能。注意,除了提供repetition的逻辑之外,你还需要提供一个repetitionText,用以实现当验证失败时,返回的错误信息,该信息会显示在组件的提示信息中。格式必须遵循vtypename + 'Text'的格式,所以,repetition的vtype,其验证失败信息,就是repetitionText。

    repetition验证函数也必须遵循一定的参数格式,一共需要提供两个参数,val参数,是宿主表单的的表单值,field是宿主表单自身,所以,我们可以快速地通过这两个参数,访问表单宿主及其表单值,以此来进行验证。

    接下来,可以编写实现逻辑如下:

Ext.apply(Ext.form.VTypes, {
     repetition: function(val, field) {     //返回true,则验证通过,否则验证失败
         if (field.repetition) {               //如果表单有使用repetition配置,repetition配置是一个JSON对象,该对象提供了一个名为targetCmpId的字段,该字段指定了需要进行比较的另一个组件ID。
             var cmp = Ext.getCmp(field.repetition.targetCmpId);   //通过targetCmpId的字段查找组件
             if (Ext.isEmpty(cmp)) {      //如果组件(表单)不存在,提示错误
                 Ext.MessageBox.show({
                     title: '错误',
                     msg: '发生异常错误,指定的组件未找到',
                     icon: Ext.Msg.ERROR,
                     buttons: Ext.Msg.OK
                 });
                 return false;
             }
             if (val == cmp.getValue()) {  //取得目标组件(表单)的值,与宿主表单的值进行比较。
                 return true;
             } else {
                 return false;
             }
         }
     },
     repetitionText: '两个指定组件的组件值不一样'
 })

至此,扩展功能已经结束,我们可以在表单中,使用repetition验证了。

   new Ext.form.FieldSet({
                 title: '注册信息',
                 autoHeight: true,
                 checkboxToggle: true,
                 labelWidth: 55,
                 items: [
                     new Ext.form.TextField({
                         fieldLabel: 'Email',
                         vtype: 'email'
                     }),
                     new Ext.form.TextField({
                         inputType: 'password',
                         id: 'pass1',
                         maxLength: 6,
                         fieldLabel: '输入密码',
                         allowBlank: false
                     }),
                     new Ext.form.TextField({
                         inputType: 'password',
                         id: 'pass2',
                         maxLength: 6,
                         fieldLabel: '重复密码',
                         allowBlank: false,
                         vtype: 'repetition',  //指定repetition验证类型
                         repetition: { targetCmpId: 'pass1' }  //配置repetition验证,提供目标组件(表单)ID
                     })
                 ]
             })

运行效果如图:




验证失败时,出现的提示信息,是我们在定义vtype时,所设置的默认值“两个指定组件的组件值不一样”这样的文字,如果需要改成另外的提示信息,可以通过重写repetitionText字段实现。

Ext.form.VTypes.repetitionText = '输入的两次密码不一样';

运行效果如图:



  • 大小: 39.8 KB
  • 大小: 39.4 KB
分享到:
评论

相关推荐

    extjs表单验证特殊字符

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

    EXT 表单验证EXT 表单验证

    通过阅读如"EXT 表单验证_journeylin_新浪博客.html"、"ExtJS中表单验证使用自定义vtype示例 - 芒果奶茶的日志 - 网易博客.mht"和"Ext表单验证 - 天行健的日志 - 网易博客.mht"这样的资源,你可以深入理解EXT表单...

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

    在提供的"demo"压缩包中,你可能会找到三个不同的文件夹,分别对应Jquery、YUI和ExtJs的表单验证示例。这些示例通常会包含HTML文件展示表单结构,CSS文件用于样式控制,以及JavaScript文件实现验证逻辑。你可以通过...

    JS表单验证数字字母汉字邮箱.pdf

    总结来说,这个示例展示了如何利用JavaScript和ExtJS的正则表达式及VType进行表单验证,以确保用户输入的数字、字母、汉字和电子邮件格式正确无误。这对于创建健壮的前端表单和提升用户体验至关重要。在实际开发中,...

    ext form小例子

    综上所述,“EXT form小例子”涵盖了EXTJS Form组件的基本用法和验证机制,特别是客户端验证和`Ext.form.Vtype`的扩展应用,对于理解和实践EXTJS表单开发具有很好的指导价值。通过深入学习和实践这些知识点,开发者...

    extjs总结.pdf

    - 示例:创建一个验证导演姓名的 `vtype`,要求由两个以大写字母开头的单词组成,单词间用空格分隔。 - 定义 `nameVal`, `nameMask` 和 `nameText`,然后将其与测试函数关联。 ```javascript Ext.form.VTypes['name...

    extjs实践大量实例讲解

    ### 示例 3:表单验证 ```javascript var form = Ext.create('Ext.form.Panel', { title: 'Basic Form', width: 300, bodyPadding: 10, renderTo: Ext.getBody(), items: [{ xtype: 'textfield', fieldLabel...

    extjs与系统切分模块设计

    以下是两个使用ExtJS创建组件的例子: 1. **表格组件**: ```javascript var lightGrid = new Ext.lingo.JsonGrid({ formConfig: [ {name: 'id', fieldLabel: 'ID', allowBlank: true, readOnly: true}, {name...

    ext-3-TextField-sample.rar_ext_ext TextField_ext textfield inp

    压缩包内的"sample"文件可能包含了创建和使用TextField的示例代码,包括创建一个简单的表单并添加TextField,以及可能的事件处理和验证机制。"www.pudn.com.txt"可能是一个包含更多相关资料或示例代码的文本文件。 ...

    学习ExtJS form布局

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

Global site tag (gtag.js) - Google Analytics