表單驗證(使用Vtype)


<div id="vtypeForm" class="w_320">
    <h2>表單驗證中使用VType驗證示例</h2>
</div>
<div id="myVtypeForm" class="w_320">
    <h2>自定義VType單字段驗證示例</h2>
</div>
<div id="mysVtypeForm" class="w_320">
    <h2>自定義VType多字段驗證示例</h2>
</div>
Ext.onReady(function(){
    //Ext表單驗證
    
    //1、驗證類型
    //1.空值驗證  allowBlank
    //2.輸入類型以及輸入格式驗證(數字、郵箱、日期、時間)
    //2.0.1  使用特定類型的表單組件Ext.form.Number,Ext.form.Date,Ext.form.Time
    //2.0.2 使用regex(正則表達式)
    //2.0.3 使用VType對輸入內容進行驗證
    //3.多字段間數據驗證(關聯字段數據的校驗)
    
    Ext.QuickTips.init();//初始化提示
    
    //4.示例:表單驗證(使用Vtype)
    Ext.create('Ext.form.Panel',{
        title : 'vtype示例',
        width : 300,
        renderTo : 'vtypeForm',
        frame :true,
        bodyPadding : 5,
        defaultType : 'textfield',//統一設置默認類型
        fieldDefaults : {//統一設置默認屬性
            width : 270,
            labelWidth : 80,
            labelSeparator : ': ',
            //allowBlank : false,
            msgTarget : 'side'
        },
        items : [{
            name : 'email',
            fieldLabel : '電子郵箱',
            vtype : 'email'
        },{
            name : 'myUrl',
            fieldLabel : '網址',
            vtype : 'url'
        },{
            name : 'englishiCase',
            fieldLabel : '字母',
            vtype : 'alpha'
        },{
            name : 'caseAndNumber',
            fieldLabel : '字母和數字',
            vtype : 'alphanum'
        }]
    });
    
    //5.示例:表單驗證(使用自定義Vtype)
    //單子段自定義驗證與多字段自定義驗證
    //5.1.1單字段驗證擴展(自定義電話號碼的VType驗證)
    Ext.apply(Ext.form.field.VTypes,{
        phone : function(v){
            //電話號碼規則
            var reg = /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/;
            return reg.test(v);
        },
        phoneText : '請輸入有效的電話號碼',
        phoneMask : /[\d-]/i //只容許輸入數字和-號
    });    
    
    Ext.create('Ext.form.Panel',{
        title : '自定義VType驗證',
        width : 300,
        renderTo : 'myVtypeForm',
        frame : true,
        bodyPadding : 5,
        defaultType : 'textfield',
        fieldDefaults : {
            width : 270,
            labelWidth : 80,
            labelSeparator : ": ",
            msgTarget : 'side'
        },
        items : [{
            name : 'phoneOne',
            fieldLabel : '住宅號碼',
            vtype : 'phone'//使用自定義的vtype
        },{
            name : 'phoneTwo',
            fieldLabel : '辦公號碼',
            vtype : 'phone'
        }]
    });
    
    //5.1.2多字段驗證擴展(開始日期與結束日期)
    //自定義驗證日期選擇範圍
    Ext.apply(Ext.form.field.VTypes,{
        dateRange : function(val,field){
            var beginDate = null,//開始日期
                beginDateCmp = null,//開始日期組件
                endDate = null,//結束日期
                endDateCmp = null,//結束日期組件
                validStatus = true;//驗證狀態
            if(field.dateRange){
                
                //獲取開始時間
                if(!Ext.isEmpty(field.dateRange.begin)){
                    beginDateCmp = Ext.getCmp(field.dateRange.begin);
                    beginDate = beginDateCmp.getValue();
                    
                }
                //獲取結束時間
                if(!Ext.isEmpty(field.dateRange.end)){
                    endDateCmp = Ext.getCmp(field.dateRange.end);
                    endDate = endDateCmp.getValue();
                }
            }
            
            //console.info(beginDate);
            //console.info(endDate);
            
            //若是開始日期或者結束日期有一個爲空則校驗經過
            if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
                validStatus = beginDate <= endDate;
            }
            
            return validStatus;
        },
        dateRangeText : '開始日期不能大於結束日期,請從新選擇。'
    });
    
    //Ext.QuickTips.init();//初始化提示信息
    //建立表單
    var dateForm = Ext.create('Ext.form.Panel',{
        title : '自定義日期範圍驗證示例',
        width : 260,
        renderTo : 'mysVtypeForm',
        frame : true,
        bodyPadding : 5,
        defaultType : 'datefield',//默認類型
        fieldDefaults : {
            width : 220,
            labelWidth : 90,
            labelSeparator : ': ',
            formate : 'Y年n月j日',
            autoFitErrors : false,//不自動調整字段寬度
            editable : false,//只讀
            allwoBlank : false,//不容許爲空
            msgTarget : 'side'
        },
        items : [{
            id : 'beginDate1',
            fieldLabel : '入學開始日期',
            vtype : 'dateRange',
            dateRange : {begin: 'beginDate1',end : 'endDate1'}
        },{
            id : 'endDate1',
            fieldLabel : '入學結束日期',
            vtype : 'dateRange',
            dateRange : {begin: 'beginDate1',end : 'endDate1'}
        },{
            id : 'beginDate2',
            fieldLabel : '畢業開始日期',
            vtype : 'dateRange',
            dateRange : {begin: 'beginDate2',end : 'endDate2'}
        },{
            id : 'endDate2',
            fieldLabel : '畢業開始日期',
            vtype : 'dateRange',
            dateRange : {begin: 'beginDate2',end : 'endDate2'}
        }]
        
    });
    
});
相關文章
相關標籤/搜索