5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

デザイントランスメディアAdvent Calendar 2019

Day 3

libphonenumberで国際電話番号をバリデーション

Last updated at Posted at 2019-12-03

今年もAdvent Calendarの時期なので、久しぶりに記事を書くことにしました。

今回は、海外の方向けの、問い合わせフォームを作成した際に、
国際電話番号をjavascriptで、バリデーションした際に色々調べたことを、
まとめたいと思います。

国際電話番号とは?

日本から海外の固定電話・携帯電話にかける場合、 相手の国番号を先頭に指定する必要があります。(日本の国番号は+81)

その国の国番号を含めた電話番号が、国際電話番号となります。
国際電話番号の決まりについては、こちらの記事が、とても参考になりました。

国際電話番号のバリデーション

最初は国番号を含んだ文字列を、正規表現で判定しようと思ったんですが、 世界各国の国番号の判定や、桁数の法則など、調べてもわからないことが多く、途方にくれていたところ、 [こちら](https://qiita.com/the_red/items/fcedd5033530b7ff7ee7)の素晴らしい記事で紹介されている、`libphonenumber`を使えばなんとかなりそうなことがわかりました。

導入方法などは上記記事でわかりやすく、書いてくれているので割愛します。

上記記事内では日本国内の電話番号をバリデーションしていますが、
↓で国際電話番号のバリデーションも可能になっています。

var internationalCallCheck = function (value) {
  return libphonenumber.isValidNumber(value)
}

internationalCallCheck('+81928321133'); // true
internationalCallCheck('+87928321133'); // false +87の国番号は存在しない

isValidNumberの第2引数に「'JP'」などを国を識別するコードを渡すと、
国番号を省略した場合の、バリデーションが有効になります。

libphonenumber.isValidNumber('0928321133') // false

libphonenumber.isValidNumber('0928321133', 'JP') // true
libphonenumber.isValidNumber('0928321133', 'CN') // false

ちなみに、第2引数を指定していても、有効な国際電話番号であれば、
指定している国コードに関係なく、バリデーションを通すようです。

libphonenumber.isValidNumber('+81928321133', 'JP') // true 'JP'は日本
libphonenumber.isValidNumber('+81928321133', 'CN') // true 'CN'は中国

また、isValidNumberは、ハイフンが適切な箇所に入ってない場合や、
市外局番の先頭にゼロがない場合でも、バリデーションを通すようになっています。

ハイフンに関しては、上記記事にある通り、isValidNumberでバリデーションチェックした後、
AsYouType()を使ってフォーマットしてあげる事で、きれいに区切られた電話番号が取得できます。

var internationalCallFormat = function (value) {
  return new libphonenumber.AsYouType().input(value);
}

internationalCallFormat('+819--2----8321--133'); // '+81 92 832 1133

ゼロを許容してしまうのは、こちらの記事にもありますが、国際電話番号を使って国外に電話するときは、
市外局番先頭の0は省略するという決まりがあるため、国際電話番号をバリデーションする際は、正しい動きとなるようです。

間違いやもっとこうしたほうが良いなどありましたら、
ご指摘いただけると嬉しいです!

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?