高级VType用于extjs4上的密码验证，需要增强

Advanced VType for password verification on extjs4 enhancement needed

本文关键字：验证 增强 密码 VType 用于 extjs4 高级      更新时间：2023-09-26

我想在extjs上使用高级VType从http://dev.sencha.com/deploy/ext-4.0.2a/examples/form/adv-vtypes.html实现密码验证，但看起来像确认密码文本字段不验证密码文本字段的变化，如果密码确认没有值(如果密码值为'test'，确认密码值为空白，那么表单是有效的)。我确定这不是一件正确的事情。如何通过以下条件使/强制确认密码文本字段有效/无效:

  1. 如果密码值不等于确认密码值，则进行确认密码无效(即使确认密码值为空)
  2. 如果密码值为空，确认密码值为空然后确认密码有效
  3. 如果密码值等于确认密码值，则确认密码有效

谢谢

好了，看来我已经解决了我自己的问题。正如分子人所说，这是不可能(轻易)实现的。

我需要重写Ext.form.field.Text.getErrors来解决

Ext.form.field.Text.override({
    getErrors: function(value) {
        var me = this,
            errors = me.callParent(arguments),
            validator = me.validator,
            emptyText = me.emptyText,
            allowBlank = me.allowBlank,
            vtype = me.vtype,
            vtypes = Ext.form.field.VTypes,
            regex = me.regex,
            format = Ext.String.format,
            msg;
        value = value || me.processRawValue(me.getRawValue());
        if (Ext.isFunction(validator)) {
            msg = validator.call(me, value);
            if (msg !== true) {
                errors.push(msg);
            }
        }
        if (value.length < 1 || value === emptyText) {
            if (!allowBlank) {
                errors.push(me.blankText);
            }
            //FIX BY ME : NEED TO COMMENT THIS BECAUSE ITS CAN IGNORING VTYPE AS ITS IMMEDIATELY RETURN ERRORS
            //return errors;
        }
        if (value.length < me.minLength) {
            errors.push(format(me.minLengthText, me.minLength));
        }
        if (value.length > me.maxLength) {
            errors.push(format(me.maxLengthText, me.maxLength));
        }
        if (vtype) {
            if(!vtypes[vtype](value, me)){
                errors.push(me.vtypeText || vtypes[vtype +'Text']);
            }
        }
        if (regex && !regex.test(value)) {
            errors.push(me.regexText || me.invalidText);
        }
        return errors;
    }
});

下面是完整的代码http://jsfiddle.net/gajahlemu/SY6WC/

在你的帖子上寻找帮助，我找到了一个简单的解决方案。从提到的extjs4示例开始，将以下'onchange'侦听器添加到'pass'字段就足够了(…它是从您的解决方案中复制+多一行):

listeners: {  
    change: function(field) {  
        var confirmField = field.up('form').down('[name=pass-cfrm]');  
        confirmField.allowBlank = (field.value == '');  // <- the change is here
        confirmField.validate();  
    }  
},

'pass-cfrm'字段的'allowBlank'属性根据'pass'字段的值动态改变。如果'pass'字段为空，则'pass-cfrm'是可选的(allowBlank = true)，否则是必需的(allowBlank = false)

第二点不容易实现。因为它需要对两个输入都设置allowBlank为true。allowBlank的优先级高于vtypes。因此，在一个字段为空而第二个字段不为空的情况下，由于allowBlank: true，空白字段将有效(而它必须无效)。

如果我们放弃第二点，解决方案就很容易了:

  • 将allowBlank: false添加到两个字段;
  • revalidate confirm field on password field change
相关文章：