jQuery Validation plugin: How to Use Regex as Rule?

在網頁程式中，表單的處理一直是很繁瑣的一環，client 端要用 Javascript 先對使用者的輸入進行初步過濾，資料送到了 server 端還是要再過濾一次。「永遠不要信任使用者輸入的資料」是表單程式的準則。

為了網站的安全不可少的 SOP，結果便是程式設計師要為此付出許多時間撰寫過濾程式。為了減緩程式設計師的腦細胞死亡速度，借助第三方程式的功能也是很重要的課題。在網頁前端常會用 jQuery Validation plugin 來對使用者輸入的資料進行前處理，這個套件內建一些基本規則，像是必填 (required)、電子郵件 (email)、網址 (url)、數字 (digits) 等等，但偶爾還是需要自訂特殊規則。

還好 jQuery 這個套件提供開放的接口可以自訂功能，透過簡單的幾行程式就能用正規表達式 (regular expression, regex) 來指定規則。

// 建立名為 'regex' 的自訂規則
$.validator.addMethod("regex", function(value, element, param) {
     // 強制加上 ^ 與 $ 符號限制整串文字都要符合
     return value.match(new RegExp("^" + param + "$"));
});

$("#myForm").validate({
    rules: {// 定義規則
        username : {
            required: true,
            regex   : "[A-Za-z0-9]+" // 寫法請參考 Regex
        },
        onlyUppercase: {
            required: true,
            regex   : "[A-Z]+"
        }
    },
    messages: {// 自定訊息
        username : {
            required: '必填',
            regex   : '只能使用英數字'
        },
        onlyUppercase : {
            required: '必填',
            regex   : '只能使用大寫英文字母'
        }
    }
});

如此一來便能自行撰寫 regex 來設定各種進階規則以及提示文字了，即使是有多組規則也沒問題。

關於正規表達式的使用方法，請參考 石頭閒語: Regular Expression (RegExp) in JavaScript。