<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'} }] }); });