95.Extjs 表单中自定义的验证规则 VTypes

 1 Ext.onReady(function(){
 2     
 3     Ext.QuickTips.init();
 4     //重写 (自定义)xtype
 5     Ext.apply(Ext.form.VTypes,{
 6         repetition:function(val,field){
 7             if(field.repetition){
 8                 var pass = Ext.getCmp(field.repetition.compareTo);
 9                 if(Ext.isEmpty(pass)){
10                     Ext.Msg.show({
11                         title:'Error',
12                         msg:'没有要对比的组件',
13                         icon:Ext.Msg.error,
14                         buttons:Ext.Msg.OK
15                     });
16                     //return;
17                 }
18                 if(val == pass.getValue()){
19                     return true;
20                 }else{
21                     return false;
22                 }
23             }
24         },
25         repetitionText:"两次输入的密码不一致"
26     });
27     
28 
29     //定义登录表单
30     var form = new Ext.form.FormPanel({
31         id:'loginform',
32         labelAlign:'right',
33         buttonAlign:'center',
34         frame:true,
35         monitorValid:true,
36         items:[{
37             xtype:'textfield',
38             fieldLabel:'姓名',
39             name:'username',
40             minLength:6,
41             allowBlank:false
42         },{
43             id:'password',
44             xtype:'textfield',
45             inputType:'password',
46             fieldLabel:'密码',
47             name:'password'
48         },{
49             id:'repasswda',
50             xtype:'textfield',
51             inputType:'password',
52             fieldLabel:'确认密码',
53             name:'compasswd',
54             vtype:"repetition",
55             repetition:{ compareTo: 'password' }
56 
57         }],
58         buttons:[
59             {text:'提交',
60              handler:loginSubmit,
61              formBind:true
62             },
63             {text:'重置',
64              handler:function(){
65                  Ext.getCmp('loginform').getForm.reset();
66              }
67             }
68         ]
69     });
70     //表单定义结束
71     
72     //提交表单是触发的函数
73     function loginSubmit(){
74         Ext.getCmp('loginform').getForm().submit({ //这里就把表单的值带过去了
75             url:'login.php',
76             success:function(form,action){
77                 //TODO 跳转到其他页面
78             },
79             failure:function(form,action){
80                 alert(action.result.msg);
81             }
82         });
83     }
84     
85     //定义一个窗口
86     
87     var win = new Ext.Window({
88         title:'用户登录',
89         layout:'fit',
90         width:300,
91         height:200,
92         closable:false,
93         resizable:false,
94         constrain:true,
95         items:[form]        
96     });
97     win.show();
98 })
posted on 2017-10-21 11:41 Sharpest 阅读(143) 评论(0) 编辑收藏举报