validation - 验证extjs中的日期文本框输入

Question

我有一个下拉列表。当我从下拉列表中选择日期选项时，文本框用户输入只能采用 mm/dd/yyy 的形式。如果还有其他问题，请发出警报。关于在 ext js 中实现相同的任何建议。

Answer 1

悉达多，

请看看这个。您可以根据您的框架优化此代码。我刚刚为您的问题举了一个例子：

var dateVar = {
        xtype     : 'datefield',
        name      : 'name',
        fieldLabel: 'Date',
        emptyText: 'mm/dd/yyyy',
        altFormats: 'm/d/Y',
        submitFormat: 'm/d/Y',
        format: 'm/d/Y',
        listeners: {
            blur: function(field) {
                if( ! field.isValid()) {
                    alert('Date is invalid!');
                }
            }
        }
    };
Ext.create('Ext.form.Panel',{
    id : 'editTask',
    renderTo : Ext.getBody(),
    items : [{
        xtype : 'combo',
        name : "type",
        fieldLabel : 'Type',
        store : ['DATE', 'NUMBER', 'TEXT'],
        width : 500,
        emptyText : "Select..",
        listeners : {
            change : selectionChanged
        }
    }, { 
        xtype: 'fieldcontainer',
        id :  'datefiledContainer',
    }]
});

function selectionChanged(combo){
    var dateVarCont = Ext.getCmp("datefiledContainer");
        dateVarCont.removeAll();
    if(combo.value == "DATE"){
        dateVarCont.add([dateVar]);
    }else{
        var field = {
            xtype : combo.value.toLowerCase() + "field",
            name : combo.value,
            fieldLabel : combo.value,
            width : 500
        }
        dateVarCont.add([field]);
    }

};

您可以在以下链接中找到工作示例：

http://jsfiddle.net/narendrakurapati/gDJYw/5/

谢谢你，

南都

Answer 2

Ext.create('Ext.form.field.Date', {
    name      : 'name',
    fieldLabel: 'Date',
    emptyText: 'mm/dd/yyyy',
    altFormats: 'm/d/Y',
    renderTo: Ext.getBody(),
    submitFormat: 'm/d/Y',
    format: 'm/d/Y',
    listeners: {
        blur: function(field) {
            if( ! field.isValid()) {
                alert('Date is invalid!');
            }
        }
    }
});

见：http: //jsfiddle.net/qrbNT/

但是。我认为是一种不好的方式。最好让用户以方便的格式输入日期，而服务器以正确的格式发送。使用“ altFormats ”和“submitFormat”属性：

...
altFormats: 'U|d-m-Y|d.m.Y|d/m/Y|d,m,Y|d-m-y|d.m.y|d/m/y|m/d/Y',
submitFormat: 'm/d/Y',
...

见：http: //jsfiddle.net/z8VUH/1/

Answer 3

像这样向文本框添加验证器：

validator: function(value){
    if((Ext.Date.parse(value, "m/d/Y") && theComboBox.getValue() == "DATE_INPUT")
        || theComboBox.getValue() != "DATE_INPUT")
        return true;
    return "Date is not in the format mm/dd/yyyy";
}

您将需要combobox对用户从中选择输入格式的引用，并且DATE_INPUT可能不是您的实际值。