ExtJS中表单验证使用自定义vtype示例

Js代码  

1. EXT中有自带的验证，比如数字，EMAIL，URL等，这些验证都很好，只要加上VTYPE，指定验证的类型就可以使用了   
2.   
3. 比如   
4. xtype:'textfield',  
5. fieldLabel:'url',  
6. vtype:'url',  
7. vtypeText:'必须要以http://开头'   
8. 当您填写的URL不是指定的路径就会出错了，错误的内容就是“必须要以http://开头'”   
9. 如果创建自己的验证呢   
10. 如下所示：   
11. Ext.apply(Ext.form.VTypes,{port:function(val,field){return checkPort(val.trim());}});   
12. 使用apply来附加验证类型到Ext.form.VTypes类里面，function(val,field)中的参数是规定好的   
13. val是value，是应用验证的控件获得的值   
14. field是对象，是当前应用的对象   
15. field.confirmTo是绑定的对象，比如用在密码验证上就很有用（一般需要填写，密码，确认密码），如下   
16. 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;}}});   
17. 使用如下：   
18. {  
19.       xtype:'textfield',  
20.       fieldLabel:'新密码',  
21.       name:'operatorNewPass',  
22.       id:'p_NewPassword',  
23.       width:150,  
24.       minLength:6,  
25.       minLengthText:'密码长度最少6位！',  
26.       maxLength:20,  
27.       maxLengthText:'密码长度最多20位！',  
28.       inputType:'password',  
29.       allowBlank:false  
30.      },{  
31.       xtype:'textfield',  
32.       fieldLabel:'确认密码',  
33.       name:'operatorConPass',  
34.       id:'p_ConfirmPassword',  
35.       width:150,  
36.       inputType:'password',  
37.       vtype:'password',  
38.             vtypeText:"两次密码不一致！",  
39.             confirmTo:'p_NewPassword',        
40.             allowBlank:false  
41.      }   
42. 现在大家可以去创建自己的验证了，在使用验证时候，一定要申明消息模式   
43. Ext.QuickTips.init();  
44. Ext.form.Field.prototype.msgTarget='side';   
45.    
46.   
47. //更改密码   
48.     changePassword = function(){   
49.          Ext.apply(Ext.form.VTypes,{password:function(val,field){   
50.                 if(field.confirmTo){   
51.                     var pwd=Ext.get(field.confirmTo);                     
52.                     if(val.trim()== pwd.getValue().trim()){   
53.                         return true;   
54.                     }   
55.                     else   
56.                     {   
57.                         return false;   
58.                     }   
59.                     return false;   
60.                     }   
61.                 }   
62.               });   
63.         var CPFormPanel = new Ext.FormPanel({   
64.             frame: true,   
65.             labelWidth: 75,   
66.             labelAlign: 'right',border:'0',   
67.             defaults: {width:160, xtype:"textfield",inputType:'password',allowBlank:false},   
68.             items:[   
69.                 {fieldLabel:'输入旧密码',name:'OldPwd', maxLength:20,blankText : '密码为空！',maxLengthText:'密码长度不能超过20位！'},   
70.                 {fieldLabel:'输入新密码',name:'NewPwdOne',id:'NewPwdOne',maxLength:20,blankText : '密码为空',maxLengthText:'密码长度不能超过20位！'},   
71.                 {fieldLabel:'确认新密码',name:'NewPwdTwo',id:'NewPwdTwo',maxLength:20,blankText : '密码为空',maxLengthText:'密码长度不能超过20位！',vtype:'password',vtypeText:'两次密码不一致',confirmTo:'NewPwdOne'}   
72.             ]   
73.         });  

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

    比如，在实战中，我们经常会遇到需要验证密码的问题，最常使用的，就是如何验证原密码跟重复密码是否一致的问题。为了实现这个功能，我们可以自定义一个vtype，命名为repetition。因此，或以编写扩展代码如下：

 

1  Ext.apply(Ext.form.VTypes, {
2      repetition:  function (val, field) {
3        // 代码逻辑在此
4      },
5      repetitionText:  ' 两个指定组件的组件值不一样 '
6  })

 

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

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

    接下来，可以编写实现逻辑如下：

 

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

 

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

 

 1               new  Ext.form.FieldSet({
 2                  title:  ' 注册信息 ' ,
 3                  autoHeight:  true ,
 4                  checkboxToggle:  true ,
 5                  labelWidth:  55 ,
 6                  items: [
 7                       new  Ext.form.TextField({
 8                          fieldLabel:  ' Email ' ,
 9                          vtype:  ' email '
10                      }),
11                       new  Ext.form.TextField({
12                          inputType:  ' password ' ,
13                          id:  ' pass1 ' ,
14                          maxLength:  6 ,
15                          fieldLabel:  ' 输入密码 ' ,
16                          allowBlank:  false
17                      }),
18                       new  Ext.form.TextField({
19                          inputType:  ' password ' ,
20                          id:  ' pass2 ' ,
21                          maxLength:  6 ,
22                          fieldLabel:  ' 重复密码 ' ,
23                          allowBlank:  false ,
24                          vtype:  ' repetition ' ,   // 指定repetition验证类型
25                          repetition: { targetCmpId:  ' pass1 '  }   // 配置repetition验证，提供目标组件（表单）ID
26                      })
27                  ]
28              })

 

运行效果如图：

 

 

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

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

 

运行效果如图：