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

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

??? 比如，在实战中，我们经常会遇到需要验证密码的问题，最常使用的，就是如何验证原密码跟重复密码是否一致的问题。为了实现这个功能，我们可以自定义一个vtype，命名为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?????????????})复制代码

?