[jQuery] Validator 用法

下面紀錄本次使用 validation 的心得。使用的外掛是 validator。

入門

針對表格建立驗證不難，參考以下程式碼：

var validation = $( '#formId' ).validate({
    rules: {
        fieldName1: {
            max: 100
        },
        fieldName2: {
            min: 0
        }
    },
    messages: {
        fieldName1: {
            max: "Over 100!"
        },
        fieldName2: {
            min: "Too less!"
        }
    }
});

可以針對不同 name 屬性的輸入元件建立驗證條件和錯誤訊息。

錯誤狀態

如果想知道表格的狀態，可以呼叫

validation.valid()

他會回傳一個布林值，告訴你此表格是否有錯誤。

客製化方法

直接進入主題，就是使用 $.validator.addMethod 建立客製化驗證條件的做法。

首先，這個函數有三個參數，通常，通常的用法如下：

$.validator.addMethod( 'ruleName', function(value, element) {
    // ... do validation
    return result;
});

但他其實可以做的事情很多：

$.validator.addMethod( 'myRuleName', function(value, element, param) {
    // ... do validation
    return result;
}, $.validator.format('Some message {0}'));

第三個參數 param 來自於：

var validation = $( '#formId' ).validate({
    rules: {
        fieldName1: {
            myRuleName: ['Hello', 'World'] // <- Here!
        },
    }
});

而你的錯誤訊息會是：

// error message in form
Some message Hello

如果你寫成

$.validator.format('Some message {0} {1}')

那錯誤訊息會是：

// error message in form
Some message Hello World

其實 $.validator.format 是一個函數，他可以這樣用：

var msg = $.validator.format('My custom messages: {0}, {1}');
msg('Hello', 'World') // My custom messages: Hello World

所以，也可以把原本作為參數帶入的 $.validator.format換成一個函數：

$.validator.addMethod( 'myRuleName', function(value, element, param) {
    // ... do validation
    return result;
}, function(param, element) {
    return 'My Error Message';
});

就可以更進一步回傳客製化的錯誤訊息了。

Dynamically param

比方，如果要對已經存在的 rule 判斷的數值改成動態的呢？比方， max 的最大值可能跟其他欄位有關，每一次會不同，那要如何動態的改變？其實也很簡單：

var validation = $( '#formId' ).validate({
    rules: {
        max: function () {
            return 12; // your code...
        },
    }
});

你可以提供函數作為參數進去，就可以動態改變了。

其他使用

以下列出一些使用的情境。

判斷 form 是否通過驗證

在某些階段，可能需要知道該 form 是否正確，才能把資料傳出去，這裡可以用一個方法：

var validator = $('#formId').validate({...})
if ( validator.valid() === fales ) {
    return;
}

重設 form

有可能你需要重設 form，讓那些錯誤訊息先消失，那你可以呼叫這個方法：

validator.resetForm();