今年もAdvent Calendarの時期なので、久しぶりに記事を書くことにしました。
今回は、海外の方向けの、問い合わせフォームを作成した際に、
国際電話番号をjavascriptで、バリデーションした際に色々調べたことを、
まとめたいと思います。
国際電話番号とは?
日本から海外の固定電話・携帯電話にかける場合、
相手の国番号を先頭に指定する必要があります。(日本の国番号は+81)
その国の国番号を含めた電話番号が、国際電話番号となります。
国際電話番号の決まりについては、こちらの記事が、とても参考になりました。
国際電話番号のバリデーション
最初は国番号を含んだ文字列を、正規表現で判定しようと思ったんですが、
世界各国の国番号の判定や、桁数の法則など、調べてもわからないことが多く、途方にくれていたところ、
こちらの素晴らしい記事で紹介されている、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は省略するという決まりがあるため、国際電話番号をバリデーションする際は、正しい動きとなるようです。
間違いやもっとこうしたほうが良いなどありましたら、
ご指摘いただけると嬉しいです！