電話番号の正規表現をJavaScriptを使ってチェック
電話番号の正規表現をJavaScriptを使ってチェック
さて今回はフォームの中での電話番号正規表現についてご紹介します。
電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回はハイフンありなしどちらでもいけるようにします。
チェックするプログラムは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∞
サイト内検索
最近の投稿
そろそろvuejs始める
最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...
02 May 2021
追い風CSS（tailwindcss）が結局楽かも
最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...
29 Apr 2021
エラー処理について
COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...
24 Jan 2021
javascriptのundefinedの判定
jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...
17 Jan 2021
Webpack5にアップデートしてエラーの対処方法2つ
webpack4（4.41.5）から webpack5（5.12.1）にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...
09 Jan 2021
ブログアーカイブ
- 2021年05月(1)
- 2021年04月(1)
- 2021年01月(4)
- 2020年12月(1)
- 2020年03月(1)
- 2020年02月(1)
- 2020年01月(1)
- 2019年12月(1)
- 2019年05月(1)
- 2019年03月(3)
- 2019年02月(3)
- 2019年01月(4)
- 2018年12月(5)
- 2018年11月(4)
- 2018年10月(5)
- 2018年09月(2)
- 2018年08月(3)
- 2018年07月(3)
- 2018年06月(5)
- 2018年05月(3)
- 2018年04月(4)
- 2018年03月(3)
- 2018年02月(4)
- 2018年01月(4)
- 2017年12月(5)
- 2017年11月(4)
- 2017年10月(6)
- 2017年09月(3)
- 2017年08月(5)
- 2017年07月(5)
- 2017年06月(4)
- 2017年05月(4)
- 2017年04月(5)
- 2017年03月(4)
- 2017年02月(4)
- 2017年01月(5)
- 2016年12月(5)
- 2016年11月(4)
- 2016年10月(4)
- 2016年09月(4)
- 2016年08月(4)
- 2016年07月(4)
- 2016年06月(4)
- 2016年05月(4)
- 2016年04月(5)
- 2016年03月(4)
- 2016年02月(4)
- 2016年01月(5)
ブログカテゴリー
著者
ウェブエンジニアの須山のブログです。
WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。