比如,在实战中,我们经常会遇到需要验证密码的问题,最常使用的,就是如何验证原密码跟重复密码是否一致的问题。为了实现这个功能,我们可以自定义一个vtype,命名为repetition。因此,或以编写扩展代码如下:
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是宿主表单自身,所以,我们可以快速地通过这两个参数,访问表单宿主及其表单值,以此来进行验证。
接下来,可以编写实现逻辑如下:
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 })