電話番号の正規表現をJavaScriptを使ってチェック

電話番号の正規表現をJavaScriptを使ってチェック

  • 2017-08-19  最終更新日:2017-08-19

さて今回はフォームの中での電話番号正規表現についてご紹介します。

電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回はハイフンありなしどちらでもいけるようにします。

チェックするプログラムはJavascriptです。jQueryでも良いですね。


スポンサーリンク


電話番号正規表現

ハイフンのありなしは値に対してハイフンはカウントしないようにします。ハイフンは空にしてから正規表現で チェックします。以下の通りです。簡単ですね。

<script>
var tel = document.getElementById('tel').value.replace(/[━.*‐.*―.*-.*\-.*ー.*\-]/gi,'');
if (!tel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)) {
	error.innerText = 'エラーメッセージ';
}
</script>

実際にフォーム作成してみましたので以下のデモで確認できます。

⇒デモを見てみる

参考になれば幸いです。


∞Tadashi Suyama∞

js tel match
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

アイキャッチ
macOS Mojaveを早速インストールしてみた感想

さて、いつもなら安定してきたぐらいにアップデートを行うのですが今回は時間もあったのでmacOS Mojaveにアップデートをしてみました。 入れてみてすぐに感じた感想は重い。。。もっさり感が半...

24 Oct 2018

アイキャッチ
ムーバブルタイム(MT)からワードプレスのインポート

今回はムーバブルタイプからワードプレスのインポートについてです。デフォルトで使っている場合の記事は多くありますのでそちらをご参考になさってください。今回はアーカイブテンプレートでアーカイブパスを...

23 Oct 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

js tel match
フッターイメージ