sencha touch Model validations（模型验证，自定义验证）

model

 1 Ext.define('app.model.Register', {
 2     extend: 'Ext.data.Model',
 3     requires: ['Ext.data.JsonP'],
 4     config: {
 5         fields: [{
 6             name: 'mobile',
 7             type: 'int'
 8         },
 9         {
10             name: 'verifycode',
11             type: 'int'
12         },
13         {
14             name: 'email',
15             type: 'string'
16         },
17         {
18             name: 'password',
19             type: 'string'
20         },
21         {
22             name: 'passwordTwo',
23             type: 'string'
24         },
25         {
26             name: 'realname',
27             type: 'string'
28         },
29         {
30             name: 'cityid',
31             type: 'int'
32         },
33         {
34             name: 'address',
35             type: 'string'
36         },
37         {
38             name: 'sex',
39             type: 'int'
40         },
41         {
42             name: 'tService',
43             type: 'string'
44         }],
45         validations: [{
46             field: 'realname',
47             type: 'presence',
48             message: '请输入姓名!'
49         },
50         {
51             field: 'password',
52             type: 'presence',
53             message: '请输入密码!'
54         },
55         {
56             field: 'email',
57             type: 'email',
58             message: '请输入正确的邮箱地址!'
59         },
60         {
61             field: 'verifycode',
62             type: 'presence',
63             message: '请输入验证码!'
64         },
65         {
66             field: 'mobile',
67             type: 'format',
68             matcher: /^(1(([35][0-9])|(47)|[8][0126789]))\d{8}$/,
69             message: '请输入11位手机号码!'
70         }]
71     },
72     //添加自定义验证
73     validate: function (options) {
74         var me = this,
75         errors = me.callParent(arguments),
76         tService = this.get('tService'),
77         password = this.get('password'),
78         passwordConfirm = this.get('passwordTwo');
79         if (password != passwordConfirm) {
80             errors.add({
81                 field: 'passwordConfirm',
82                 message: '两次密码输入不一致!'
83             })
84         }
85         if (tService == 'O') {
86             if (this.get('address') == '') {
87                 errors.add({
88                     field: 'address',
89                     message: '请输入地址!'
90                 })
91             }
92         }
93         return errors;
94     }
95 });

视图：

 1 Ext.define("app.view.user.Register", {
 2     alternateClassName: 'userRegister',
 3     extend: 'Ext.form.Panel',
 4     xtype: 'userRegister',
 5     requires: ['Ext.form.FieldSet', 'Ext.field.Password', 'Ext.field.Email', 'Ext.field.Select', 'Ext.field.Radio', 'Ext.field.Hidden'],
 6     config: {
 7         padding: 10,
 8         title: '注册',
 9         cls: 'fromPanel',
10         items: [{
11             xtype: 'hiddenfield',
12             itemId: 'tService',
13             name: 'tService'
14         },
15         {
16             xtype: 'fieldset',
17             iconCls: 'home',
18             defaults: {
19                 labelWidth: '40%'
20             },
21             items: [{
22                 xtype: 'textfield',
23                 name: 'mobile',
24                 placeHolder: '手机号码(点图标取验证码)',
25                 cls: 'user ico x-field-clearable'
26             },
27             {
28                 xtype: 'textfield',
29                 name: 'verifycode',
30                 placeHolder: '验证码'
31             }]
32         },
33         {
34             xtype: 'fieldset',
35             iconCls: 'home',
36             defaults: {
37                 labelWidth: '40%'
38             },
39             items: [{
40                 xtype: 'emailfield',
41                 name: 'email',
42                 placeHolder: '电子邮件'
43             },
44             {
45                 xtype: 'passwordfield',
46                 name: 'password',
47                 placeHolder: '密码'
48             },
49             {
50                 xtype: 'passwordfield',
51                 name: 'passwordTwo',
52                 placeHolder: '再次输入密码'
53             },
54             {
55                 xtype: 'textfield',
56                 name: 'realname',
57                 placeHolder: '姓名'
58             },
59             {
60                 xtype: 'selectfield',
61                 name: 'cityid',
62                 itemId: 'cityid',
63                 valueField: 'areaCode',
64                 displayField: 'cityname'
65             },
66             {
67                 itemId: 'address',
68                 xtype: 'textfield',
69                 name: 'address',
70                 placeHolder: '详细地址'
71             },
72             {
73                 layout: 'hbox',
74                 items: [{
75                     xtype: 'radiofield',
76                     name: 'sex',
77                     value: '1',
78                     label: '男',
79                     checked: true,
80                     flex: 1
81                 },
82                 {
83                     xtype: 'radiofield',
84                     name: 'sex',
85                     value: '0',
86                     label: '女',
87                     flex: 1
88                 }]
89             }]
90         },
91         {
92             xtype: 'button',
93             action: 'register',
94             text: '提交注册',
95             ui: 'action'
96         }]
97     }
98 });

验证代码：

 var valid = myUtil.valid('app.model.User', this.getUserLogin());

验证代码中调用的公用类：

 1 /*公共类*/
 2 Ext.define('myUtil', {
 3     statics: {
 4         /*为Ext.Viewport添加一个消息提示组件*/
 5         addMessage: function () {
 6             Ext.Viewport.setMasked({
 7                 xtype: 'loadmask',
 8                 cls: 'message',
 9                 transparent: true,
10                 indicator: false
11             });
12             this.hideMessage();
13         },
14         /*显示一个消息提示*/
15         showMessage: function (mes, autoHide) {
16             var me = this, message = this.getMessage();
17             message.setMessage(mes);
18             message.show();
19             //是否自动关闭提示
20             if (autoHide) {
21                 setTimeout(function () {
22                     message.hide();
23                 },
24                 500);
25             }
26         },
27         /*隐藏消息提示*/
28         hideMessage: function () {
29             this.getMessage().hide();
30         },
31         //消息组件
32         getMessage: function () {
33             return Ext.Viewport.getMasked();
34         },
35         //验证模型
36         valid: function (model, from) {
37             var tmpModel = Ext.create(model),
38             me = this,
39             errors, valid;
40             from.updateRecord(tmpModel);
41             errors = tmpModel.validate();
42             valid = errors.isValid();
43             if (!valid) {
44                 errors.each(function (err) {
45                     me.showMessage(err.getMessage(), true);
46                     return;
47                 });
48             }
49             return valid;
50         }
51     }
52 });

 

 

posted @ 2013-09-26 17:16  魔狼再世  阅读(1365)  评论(0)  编辑  收藏  举报