ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 欄位驗證 ( Validation )

說到 ASP.NET MVC 4 欄位驗證，一想到就是直接在 Model 做設定，View 端就可以直接驗證資料，並且為了防止有人將資料或者不透過網頁直接送到 Controller，在 Controller 也有 ModelState.IsValid 可以檢查資料是否正確。

但是在 MVC 4 WebApi 和 Extjs 中，Controller 可以照原本的方式處理，但是 View 端就必須要使用 Extjs 的驗證了。

以下介紹 Extjs 驗證的設定方法解說：

最大長度

maxLength: 20
// 錯誤訊息
maxLengthText: '最大長度為 20 字元' 

最小長度

minLength: 5
// 錯誤訊息
minLengthText: '最小長度為 5 字元'

是否空值

// 允許為空
allowBlank: false
// 錯誤訊息
blankText: '此欄必填'

Regex

// regex 驗證
regex: /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/
// 錯誤訊息
regexText: '請輸入 IP 格式'
// 輸入遮罩，意旨只能輸入以下格式文字在欄位內，其他格式會擋住。
maskRe: /[\d\.]/i

vtype

預設有四個型態：「alpha」( 字母 )、「alphanum」( 字母數字 )、「email」( 電子郵件 )、「url」( 網址 )。

vtype: 'email'
// 錯誤訊息
vtypeText: '不符合 Email 格式'

自訂 vtype

自訂一個 vtype 就要使用 Ext.apply 將 Ext.form.field.VTypes 複製出來，加上自訂的驗證，在欄位上使用即可。

參考範本：

Ext.apply(Ext.form.field.VTypes, {
    XXX: function (v) {
        return /^ regex pattern $/.test(v);
    },
    // 錯誤訊息
    XXXText: 'error message',
    // 輸入遮罩，意旨只能輸入以下格式文字在欄位內，其他格式會擋住。
    XXXMask: / regex pattern /i
});

在欄位上使用就加上 vtype: 'XXX' 就可以使用了。

例如：

Ext.apply(Ext.form.field.VTypes, {
    IPAddress: function (v) {
        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
    },
    IPAddressText: '請輸入 IP 格式',
    IPAddressMask: /[\d\.]/i
});

欄位中使用：

vtype: 'IPAddress'

效果其實與 Regex 欄位驗證一樣，但是這種方法可以集中管理、重複使用，比較建議使用這種做法。

更多的 驗證方法 於 「More VTypes!」 可以找到參考。

進階用法：ExtJS中表單應驗使用自定義vtype示例


完整程式碼：

//載入會用到的程式
Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Absolute',
    'Ext.window.Window',

    'Ext.Button'
]);

Ext.apply(Ext.form.field.VTypes, {
    IPAddress: function (v) {
        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
    },
    IPAddressText: '請輸入 IP 格式',
    IPAddressMask: /[\d\.]/i
});

Ext.onReady(function () {
    //建立 form 框架
    var form = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        defaultType: 'textfield', 
        border: false, 
        layout: 'form',
        padding: 10,
        items:
        [
            {
                id: 'textfieldId', 
                xtype: 'textfield', 
                fieldLabel: '文字欄位', 
                msgTarget: 'side', 
                name: 'textfield',
                //最大長度
                maxLength: 20,
                maxLengthText: '最大長度為 20 字元',
                // 最小長度
                minLength: 5,
                minLengthText: '最小長度為 5 字元',
                // 允許為空 false 
                allowBlank: false,
                blankText: '此欄必填',
                // alpha , alphanum , email , url
                vtype: 'IPAddress',
                vtypeText: '不符合 Email 格式',
                // regex 驗證
                regex: /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/,
                // 錯誤訊息
                regexText: '請輸入 IP 格式',
                // 輸入遮罩，意旨只能輸入以下格式文字在欄位內，其他格式會擋住。
                maskRe: /[\d\.]/i
            }
        ],
        buttons: [{
            text: 'Send',
            // button 按下動作
            handler: function () {
                // 檢查form isValid  檢查條件是否符合
                this.up('form').getForm().isValid();
                
            }
        }, {
            text: 'Cancel'
        }]
    });

});