validatefield詳解

一、validatefield是什麼？

validatefield是一個ExtJS表單組件中非常常用的驗證方法，用於對錶單中的欄位進行驗證，確保數據的正確性。這個方法是在表單提交前被調用，如果有欄位不符合規定，表單將無法提交。在ExtJS中，可以通過繼承Field這個基類來自定義validatefield方法的行為，比如自定義驗證規則、自定義錯誤信息等等。

二、validatefield如何使用？

使用validatefield非常簡單，只需要在表單欄位定義時指定一個validator函數即可，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '用戶名',
        name: 'username',
        allowBlank: false,
        validator: function(value) {
            if (value.length < 6) {
                return '用戶名長度不能少於6個字元';
            } else {
                return true;
            }
        }
    }

在上面的代碼中，我們定義了一個文本框，其name屬性值為「username」，然後指定了一個validator函數，該函數用於驗證文本框中輸入的內容是否符合我們的要求。如果validator函數返回true，則代表當前欄位驗證通過；如果返回一個字元串，代表驗證失敗，並且該字元串會作為錯誤信息顯示在頁面上。

三、validatefield支持哪些驗證規則？

validatefield支持的驗證規則非常豐富，下面我們逐一介紹：

1. allowBlank

該規則用於檢測是否允許當前欄位為空。如果該值為true，則代表可以為空；如果為false，則代表不能為空。

2. email

該規則用於驗證電子郵件地址格式是否正確，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '郵箱',
        name: 'email',
        vtype: 'email'
    }

3. url

該規則用於驗證URL地址是否格式正確，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '網址',
        name: 'url',
        vtype: 'url'
    }

4. alpha

該規則用於驗證輸入的內容是否全部為字母，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '名稱',
        name: 'name',
        vtype: 'alpha'
    }

5. alphaNum

該規則用於驗證輸入的內容是否為字母或數字，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '編號',
        name: 'code',
        vtype: 'alphanum'
    }

6. num

該規則用於驗證輸入的內容是否為數字，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '數量',
        name: 'count',
        vtype: 'num'
    }

7. currency

該規則用於驗證輸入的內容是否為貨幣格式，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '價格',
        name: 'price',
        vtype: 'currency'
    }

8. phone

該規則用於驗證輸入的內容是否為電話號碼格式，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '電話號碼',
        name: 'phone',
        vtype: 'phone'
    }

9. password

該規則用於驗證輸入的內容是否為密碼格式（要求同時包含數字、字母、特殊字元），如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '密碼',
        inputType: 'password',
        name: 'password',
        vtype: 'password'
    }

四、validatefield使用注意事項

雖然validatefield使用起來非常簡單，但是在實際開發中還是需要注意一些問題的。

1. validatefield只作用於表單欄位

validatefield只作用於表單中的欄位，如果你想對整個表單進行驗證，需要使用form的isValid方法，例如：

    var form = Ext.create('Ext.form.Panel', {
        ...
        buttons: [{
            text: '提交',
            handler: function() {
                if (form.isValid()) {
                    form.submit();
                }
            }
        }]
    });

2. validatefield不支持非同步驗證

validatefield方法是同步的，也就是說在驗證期間頁面會被阻塞，如果需要使用非同步驗證，需要在提交表單時使用form的submit方法，並在提交完成後再進行驗證。

3. validatefield支持自定義驗證規則和錯誤信息

如果ExtJS默認提供的驗證規則不能滿足您的需求，您可以使用自定義驗證規則。下面是一個例子：

    {
        xtype: 'textfield',
        fieldLabel: '人口數量',
        name: 'pop',
        allowBlank: false,
        validator: function(value) {
            if (value.length != 6) {
                return '人口數量必須是6位數';
            } else if (value.charAt(0) != '1') {
                return '人口數量必須以1開頭';
            } else {
                return true;
            }
        }
    }

在上面的代碼中，我們自定義了一個驗證規則，要求輸入的內容必須為6位數字，且必須以1開頭。如果驗證失敗，則會返回一個字元串，作為錯誤信息顯示在頁面上。

4. 錯誤信息可以動態指定

如果您希望動態指定當前表單欄位的錯誤信息，可以通過修改表單欄位的msgTarget屬性來實現，如下例所示：

    {
        xtype: 'textfield',
        fieldLabel: '用戶名',
        name: 'username',
        allowBlank: false,
        msgTarget: 'under',
        validator: function(value) {
            if (value.length < 6) {
                return '用戶名長度不能少於6個字元';
            } else {
                return true;
            }
        }
    }

在上面的代碼中，我們通過設置msgTarget屬性值為「under」來指定錯誤信息顯示在文本框下面。如果msgTarget屬性值為「side」，則錯誤信息將會顯示在文本框旁邊。

五、總結

通過本文的介紹，我們了解到validatefield方法是一個非常常用的ExtJS表單驗證方法。我們可以通過指定vtype屬性值來使用ExtJS默認提供的驗證規則，也可以通過修改validator函數來自定義驗證規則。在使用過程中，我們需要注意validatefield只作用於表單欄位、不支持非同步驗證、可以自定義驗證規則和錯誤信息等問題。