jQuery validate.js 台灣手機格式號碼表單驗證

jQuery validate.js 是一個方便用於表單驗證的jQuery plugin，透過它你可以簡單且完整的處理表單驗證的問題，但在電話號碼處理上，他並沒有提供太完整的過濾函數，在官方網站只有說明提供了phoneUS –驗證有效的美國電話號碼，但其他國家號碼沒有相對的函數提供。

表達式Regular Expression

其實要做到台灣手機號碼的格式認證，要先對於台灣手機格式的了解：

台灣的手機號碼目前基本上都符合一定的格式，那就是總共十碼，前兩碼是09

• 一共有 10 位數
• 開頭要是 09
• 每一個字元都要是數字

了解格式規則後，則可以使用表達式（Regular Expression）驗證資料

const re = new RegExp('^09\\d{8}$');

validate.js 中使用表達式

在validate.js他本身也沒有提供表達式方法，需要另外添加下列的方法才可使用如matches

jQuery.validator.methods.matches = function( value, element, params ) {
    var re = new RegExp(params);
    return this.optional( element ) || re.test( value );
}

有了matches方法後，我們就可以在rules調用它

rules: {
    phone: {
        required:true,
        matches: new RegExp('^09\\d{8}$'),
    }
}

Demo

驗證無反應

若有的情況方式需要隱藏<input>，使用其他圖片方式替代<input>，請不要使用CSS display:nono;，這樣jQuery會讀不到元素，<input>將會導致無此input，驗證都沒有反應的情況，解決方法可以使用visibility:hidden方法做隱藏元素。

延伸閱讀：

jquery to validate phone number
簡易 Regular Expression 入門指南