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

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

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

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

Q&A

解決済

4回答

586閲覧

足のサイズ入力の際のフィルター

finalfight

総合スコア15

JavaScript

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

0グッド

0クリップ

投稿2018/06/11 02:13

編集2018/06/11 15:45

現在html及びJavascriptの勉強をしております。
そこで、htmlの入力フォームにて「足のサイズ」を入力するというサンプルを作っているのですが、誤入力をなるべく事前検知するフィルターをJavascriptにて実装しようと考えており、下記プログラムを作ってみました。
※html側では、4桁を越える数値の入力は出来ない様にしています。
1: 何も入力されていないとNG
2: 半角数字とピリオド以外はNG
3: 2桁未満はとりあえずNG
4: 最初の入力数値が0はおかしいのでNG
5: 最初の入力数値がピリオドでもおかしいのでNG
6: サイズ1桁は除外したいので、2桁目がピリオドでもNG

var shoes_size = hoge.val(); if (shoes_size == "") { //1 alert("入力NG"); return; } else if ( shoes_size.match(/[^0-9.]/) || //2 shoes_size.length < 2 || //3 shoes_size.slice(0,1) === '0' || //4 shoes_size.slice(0,1) === '.' || //5 shoes_size.slice(1,2) === '.') //6 { alert("入力NG"); return; } //サイズ3桁は基本有り得ないので、1~3桁目が全て数値でもNG if (shoes_size.slice(0,1).match(/[0-9]/) && shoes_size.slice(1,2).match(/[0-9]/) && shoes_size.slice(2,3).match(/[0-9]/)) { alert("入力NG"); return; }

フィルター機能としてはこんな感じなのですが、もっと簡略化出来ないものかと試行錯誤しています。
また、

match(/[^0-9]/) match(/[^0-9]+$/)

この2つの違いが良く分かりませんでした。

恐れ入りますが、同じフィルター条件でもっと整理出来るのか、どなたかアドバイス頂ければと思っています。よろしくお願い致します。

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

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

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

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

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

m.ts10806

2018/06/11 03:42

入力するだけなのでしょうか。入力した情報をどうしたいのか も具体的に記載してください
finalfight

2018/06/11 15:47 編集

サンプルとして書いていた為、入力した情報を他に扱うという事は考えておりません。失礼致しました。
finalfight

2018/06/11 15:40

修正致します。ご指摘ありがとうございます。
guest

回答4

0

ベストアンサー

この条件だったら、JavaScriptを書かずに<input type='number'>そのままでもかなりの部分を実装できそうです。

html

1<input type="number" required min="10" max="50" step="0.5" >

このようにすれば、

  1. 何も入力されていないとNG→requiredで実装
  2. 半角数字とピリオド以外はNG→<input type='number'>のデフォルトの挙動
  3. 2桁未満はとりあえずNG→min="10"で実装
  4. 最初の入力数値が0はおかしいのでNG→min="10"で実装
  5. 最初の入力数値がピリオドでもおかしいのでNG→min="10"で実装
  6. サイズ1桁は除外したいので、2桁目がピリオドでもNG→min="10"で実装

ついでに、靴のサイズは0.5cm刻みなので、step="0.5"を入れて、整数か.5の値にしてあったり、max="50"で最大値も設定してあります(このあたりはお好みに応じてどうぞ)。

投稿2018/06/11 02:22

編集2018/06/11 02:28
maisumakun

総合スコア145121

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

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

maisumakun

2018/06/11 02:29

なお、1mm単位まで入れられるようにするには、「step="0.1"」の指定が必要です(何も書かないと、step=1、つまり整数しか通りません)。
finalfight

2018/06/11 15:31

お返事が遅くなってしまってすみません。 フィルターの実装はJavascriptでなるべく行なうもの、と思い込んでおりました。html内でこれだけ制限出来るんですね...。入力ミスの度にJavascript側でアラートを出したりする機能は入力者にとっても煩わしいと感じるので、ぜひ参考にさせて頂きます。本当にありがとうございます。
guest

0

ある程度選択肢が絞られているものはselectタグなどで選ばせるのがベターだと思います
かりに8-30を0.5単位だとしても選択肢は50以下ですしね

投稿2018/06/11 03:24

yambejp

総合スコア114572

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

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

finalfight

2018/06/11 15:26

お返事が遅くなってしまってすみません。 身長や体重とは違って、数値の刻みで表現出来るものはselectを用いた方が良いという発想がありませんでした...。試しにselectタグを使ってみましたが、非常に便利ですね。ぜひ参考にさせて頂きます。ありがとうございます。
guest

0

こんにちは。

基本的には、maisumakunさんの案に賛成ですが( 26.5 のようなテキストをユーザーが打つ
のは大変かなと思うので。) 、何らかの理由でユーザーからテキストを自由に入力させて、正規表現で
判定する必要があるのであれば、以下のようなものになるかと思います。

javascript

1const shoesSizeRegex = /^[1-9][0-9](.[05])?$/;

上記では、ご質問にあるルールに

  • ピリオドがなくても可とする。
  • ピリオドがある場合、その後に 0 または 5 のいずれかが続いて、そこで文字列が終わる。

を加えています。以下は、上記の正規表現のテストです。

javascript

1const shoesSizeRegex = /^[1-9][0-9](.[05])?$/; 2 3const inputs = [ 4 '25.5', 5 '26.0', 6 '20', 7 '8.5', 8 '27.9', 9 '20.', 10 '025.0', 11]; 12 13inputs.forEach((str) => { 14 console.log(`${str}: ${shoesSizeRegex.test(str)}`); 15});

以下、上記の出力結果です。

25.5: true

26.0: true
20: true
8.5: false
27.9: false
20.: false
025.0: false

以下は蛇足です。

ユーザーとしては、自由入力でサイズを打ち込む手間をかけるのであれば、
サイズの後に、(必須ではなくオプションで)幅も入れたいかもしれません。

例) 25.5 3E , 24EE など

投稿2018/06/11 02:57

編集2018/06/11 03:09
jun68ykt

総合スコア9058

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

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

finalfight

2018/06/11 15:39

お返事が遅くなってしまってすみません。 /^[1-9][0-9](.[05])?$/のフィルターの掛け方がとても参考になりました。これだけで自分がJavascriptで何度もif文を使って実装した内容とほぼ同じになるんですね。Javascriptにてアドバイスを頂き、誠にありがとうございます。
guest

0

match(/[^0-9]/)

match(/[^0-9]+$/)

上は、対象文字列のどこかに数字以外の文字が含まれていればヒットです。
下は、数字以外の文字で対象文字列が終わっていればヒットです。

/[^0-9]+$/[^0-9]$/と書いてもこの場合は実質同じですね。

投稿2018/06/11 04:16

KojiDoi

総合スコア13669

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

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

finalfight

2018/06/11 15:17

お返事が遅くなってしまってすみません。 後者の意味(match(/[^0-9]+$/))が良く分かっていなかったのですが、要は「対象文字列が全て数字以外で構成されている」、という事だったのですね!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問