質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1158閲覧

電話番号フォームに数値を入力して正しいかどうか判断するJavasctiptについて

takochan1192

総合スコア100

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/24 11:20

javascriptの学習を始めて、数日のど素人です。
勉強として、電話番号フォームに入力された数値が正しいかどうか
(10桁もしくは、11桁の数値ならOK)判断し、それ以外(9桁以下、もしくは文字・記号など)
なら、「正しく入力し直してください」と表示するコードを作りたいのですが、いまいちうまくいきません。
このイベントが発生するタイミングは、数値を入力して、enterキーを押すタイミングで行いたいと思い、oninputを入れたのですが、うまくいきませんでした。
ご教示いただけますと幸いです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>javascripのテスト</title> 8</head> 9<body> 10 <form action="#" id="form"> 11 <p>電話番号入力:<input type="text" name="telNumber" placeholder="ハイフン無しで入力ください。" maxlength="11"></p> 12 </form> 13 <script src="test.js"></script> 14</body> 15</html>

Javascript

1 2document.getElementById('form').telNumber.value.oninput = function(){ 3 if (form.maxlength === 10 ||form.maxlength === 11){ 4 console.log('正しく入力されています。'); 5 } else { 6 window.alert('正しく入力し直してください。'); 7 } 8}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

ざっくりこんな指定をするとよいでしょう

HTML

1<form> 2<input type="text" name="tel" maxlength="11" minlength="10" pattern="[0-9]+" placeholder="10-11桁の数値"> 3<input type="submit" value="send"> 4</form>

投稿2020/05/24 14:18

yambejp

総合スコア115010

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takochan1192

2020/05/25 04:36

この2行でばちっとできました。ありがとうございました。 こんなに、短いコードでいいんですね!! 不勉強でお恥ずかしい限りです。 本当にありがとうございました!!
guest

0

恐らく、この辺で解決できそうな気がします。
https://its-office.jp/blog/js/2017/08/19/telmatch.html

上記より引用ですが

javascript

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

投稿2020/05/24 13:13

TakuHosoya

総合スコア33

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takochan1192

2020/05/25 04:33

ご回答いただきまして、誠にありがとうございます。 参考にさせていただきました。
guest

0

「電話番号 正規表現」でぐぐると、そこらへんの解説が出てくるんで、一通り読んでみてはどうでしょう

投稿2020/05/24 12:06

y_waiwai

総合スコア87800

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takochan1192

2020/05/25 04:34

正規表現というものがあるとは知りませんでした。不勉強でお恥ずかしいです。 ご回答いただきまして、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問