五月 23, 2021

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

延伸閱讀:

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


© UCAMC. All rights reserved.
Powered by CITIAR.