Ext.apply小小应用

ExtJS密码验证

最新推荐文章于 2022-10-31 08:58:39 发布

原创最新推荐文章于 2022-10-31 08:58:39 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用ExtJS创建用户表单并实现密码一致性验证。通过自定义vtype属性及使用Ext.apply方法，确保用户两次输入的新密码保持一致。

我们在一个Ext.form.FormPanel中定义了vtype : 'password'这么个东西.

var user_win_form = new Ext.form.FormPanel({
autoScroll : true,
frame : true,
defaultType : 'textfield',
items : [{
fieldLabel : '旧密码',
name : 'oldPwd',
inputType : 'password',
id : 'userOldPwd',
allowBlank : false,
blankText : '旧密码不能为空',
regex : /^[\s\S]{0,12}$/,
regexText : '旧密码长度不能超过12个字符',
msgTarget : 'title'
}, {
fieldLabel : '新密码',
name : 'newPwd',
inputType : 'password',
id : 'userNewPwd',
allowBlank : false,
blankText : '新密码不能为空',
regex : /^[\s\S]{0,12}$/,
regexText : '新密码长度不能超过12个字符',
msgTarget : 'title'
}, {
fieldLabel : '确认新密码',
name : 'confirmNewPwd',
inputType : 'password',
id : 'userConfirmNewPwd',
allowBlank : false,
blankText : '确认新密码不能为空',
regex : /^[\s\S]{0,12}$/,
regexText : '确认新密码长度不能超过12个字符',
msgTarget : 'title'
}]
});

这个表格功能是简单的新建用户然后两次输入密码判断错误.

这里用 apply来拷贝vtype这个属性实现判断.

Ext.apply(Ext.form.VTypes, {
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : '两次输入的密码不一致!'
});

具体apply代码中,我们先找到我们定义好的form中的vtype 然后看到定义这个 vtype为password的时候的回调function

这个回调的函数里的passwordText就是后面在拷贝到form的属性,这个passwordText的源代码可以看下面,

实现很巧妙漂亮.

Ext.apply = function(object, config, defaults) {
        if (defaults) {
            Ext.apply(object, defaults);
        }
        if (object && config && typeof config === 'object') {
            var i, j, k;
            for (i in config) {//复制所有属性
                object[i] = config[i];
            }
            if (enumerables) {
                for (j = enumerables.length; j--;) {
                    k = enumerables[j];
                    if (config.hasOwnProperty(k)) {
                        object[k] = config[k];
                    }
                }
            }
        }
            return object;
};