動態自定義在後臺驗證輸入值是否合法

以前是通過是通過指定validator實現的,比如下面“確定密碼”輸入框的配置項validator,但發現有個很嚴重的缺點,如果涉及到後臺的話,前臺會頻繁的訪問後臺,很浪費資源,於是在此改進了一下。

var  PwdEditUi = Ext.extend(Ext.Window, {
    title: '修改密碼',
    width: 400,
    height: 180,
    layout: 'fit',
    modal: true,
    initComponent: function () {
        this.items = [
            {
                xtype: 'form',
                ref:'form',
                baseCls: 'x-plain',
                padding: 10,
                labelWidth: 70,
                id: 'PwdForm',
                monitorValid: true,
                buttonAlign: 'center',
                defaults: { anchor: '95%' },
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: '用 戶 名',
                        name: 'Teach_username',
                        allowBlank: false,
                        blankText: '用戶名不能爲空!',
                        emptyText: '請輸入用戶名',
                        invalidText: '該用戶名已存在!',
                        listeners: {
                            'blur': function () {//設置監聽函數
                                PwdEditView.checkname.call(this);
                            }
                        }
                    },
                    {
                        xtype: 'textfield',
                        inputType: 'password',
                        emptyText: '請輸入新密碼',
                        allowBlank: false,
                        blankText: '新密碼不能爲空!',
                        fieldLabel: '新 密 碼',
                        id: 'newPwd'
                    },
                    {
                        xtype: 'textfield',
                        inputType: 'password',
                        fieldLabel: '確認新密碼',
                        id: 'affirmPwd',
                        emptyText: '請輸入新密碼',
                        allowBlank: false,
                        blankText: '確認新密碼不能爲空!',
                        invalidText: '兩次密碼不一致!',
                        validator: function () {
                            if (Ext.get('affirmPwd').getValue() == Ext.get('newPwd').getValue())
                                return true;
                            return false;
                        }
                    },
                    {
                        xtype:'hidden',
                        name: 'Teach_pk'
                    }
                ],
                buttons: [{
                    text: '提交',
                    formBind: true,
                    iconCls: 'submit',
                    handler: function () {
                        PwdEditView.submit();
                    }
                }, {
                    text: '退出',
                    iconCls: 'decline',
                    handler: function () {
                        PwdEditView.destroy();
                    }
                }]

            }
        ];
            PwdEditUi.superclass.initComponent.call(this);
    }
});
Ext.override(PwdEditUi, {
    //檢查用戶名
    checkname: function () {
        var self = this;
        var userName = self.getValue();
        Ext.Ajax.request({
            url: 'JsonPage/TeacherManage.aspx?param=checkname&rnd=' + Math.random(),
            params: { username: userName },
            success: function (response, options) {
                var result = Ext.decode(response.responseText);
                if (result.success == true) { //用戶名可用
                    self.markInvalid('用戶名已存在,請選擇其他用戶名!');
                    self.validator = null;
                } else { //用戶名已存在   
                    self.markInvalid('用戶名已存在,請選擇其他用戶名!');
                    self.validator = function () {
                        return false;
                    };
                }
            },
            failure: function () {
                msg('網絡連接出錯,請稍後重試!');
                self.validator = null;
            }
        });
    }
});
 PwdEditView = new PwdEditUi();
 PwdEditView.show();




發佈了30 篇原創文章 · 獲贊 2 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章