テキストにユーザーの入力欄（整数の入力）が10項目あるとします。
下記のコードのようにHTMLからid取得を行い、取得した要素を配列に纏め、
その配列からfor文を利用し、１０個の入力値に対し正規表現で整数（0以下の整数は除く）のみ入力できるよう設定したいのですが、配列やfor文の処理条件を模索しましたが初心者のため現段階では思いつきませんでした。ご教授いただけないでしょうか。
実際に次のようなパターンになります。
コード
<input type ="text" value ="0~9の整数" id ="nyuryoku1">
<input type ="text" value ="0~9の整数" id ="nyuryoku2">
<input type ="text" value ="0~9の整数" id ="nyuryoku3">
<input type ="text" value ="0~9の整数" id ="nyuryoku4">
<input type ="text" value ="0~9の整数" id ="nyuryoku5">
<input type ="text" value ="0~9の整数" id ="nyuryoku6">
<input type ="text" value ="0~9の整数" id ="nyuryoku7">
<input type ="text" value ="0~9の整数" id ="nyuryoku8">
<input type ="text" value ="0~9の整数" id ="nyuryoku9">
<input type ="text" value ="0~9の整数" id ="nyuryoku10">
<input type ="button" value="入力結果" id ="draw" onclick ="check1()">コード
//ユーザーが入力結果をクリックしたら
function check1() {
var nyuryoku1 = document.getElementById('nyuryoku1');
var nyuryoku2 = document.getElementById('nyuryoku2');
var nyuryoku3 = document.getElementById('nyuryoku3');
var nyuryoku4 = document.getElementById('nyuryoku4');
var nyuryoku5 = document.getElementById('nyuryoku5');
var nyuryoku6 = document.getElementById('nyuryoku6');
var nyuryoku7 = document.getElementById('nyuryoku7');
var nyuryoku8 = document.getElementById('nyuryoku8');
var nyuryoku9 = document.getElementById('nyuryoku9');
var nyuryoku10 = document.getElementById('nyuryoku10');
var 変数名 = [配列]
for文() {処理条件}
}
の表記のような感じでクリックされたら処理をする。の表記で纏めたいです。
今回は１０個で例をあげさせていただきましたが、入力値が１００個になっても、
１００個同じコードを書くのではなく、何かの引き出し、ボックスなどに一纏めにしてから、
処理を行っていけたらなと思い投稿させていただきました。
for文の処理条件には別条件分岐を使い、ユーザーの入力値に何も入力されていなかった場合、
なども後から追加したいです。
配列を使ってfor文を使う以外にも方法がありましたらご教授のほどお願い致します。
追記＞
正規表現の部分ですが、整数（0以下を除く）を入力した場合はtrue、
それ以外の負の整数や文字列が手入力により入力された場合は、alertを使って「入力された数値は使用できません」などのようにしたいです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+7
pattern属性
pattern属性で正規表現を指定することが可能です。
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation
https://www.html5rocks.com/ja/tutorials/forms/html5forms/
<input pattern="^\d+$" />
<input pattern="^\d$" />(2018/05/08 12:32追記)
^$は不要との指摘を頂きました。
<input pattern="\d+" />
<input pattern="\d" /><input type="number">
<input type="number"> には「小数」と「負の数」にマッチする性質があり、これだけでは「正の整数」を実現できません。
(2018/05/08 12:32追記)
step,min,max属性ではキーボード入力に対応できません。
Re: pelican さん
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+6
JavaScriptを持ち出すまでもなく、HTML5の機能で入力できるものを制限するほうが楽かと思います。
<input type='number' min='0' max='9' required （後略）>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+3
alertまでがワンパックならjavascriptで
<script>
document.addEventListener('input',function(e){
var t=e.target;
if(t.nodeName=="INPUT" && t.id.match(/^nyuryoku\d+$/)){
var reg=new RegExp("[^\\d]","g");
var v=t.value;
if(v.match(reg)){
t.value=v.replace(reg,"");
alert("入力された数値は使用できません");
}
}
});
</script>
<input type ="text" value ="" id ="nyuryoku1">
<input type ="text" value ="" id ="nyuryoku2">
<input type ="text" value ="" id ="nyuryoku3">
<input type ="text" value ="" id ="nyuryoku10">
<input type ="text" value ="" id ="nyuryoku100">投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.51%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
mts10806
2018/05/08 06:30
JavaScriptの方もコードブロック```で囲っておいてください。また、ID必ず連番でしょうか？連番以外の任意の名称でも対応できるような形が目標でしょうか？
mts10806
2018/05/08 07:47
「正規表現で整数（0以下の整数は除く）のみ入力できるよう設定」の部分は未着手ですか？
pelican
2018/05/08 07:48
コード修正致しました。ご指摘ありがとうございます。IDは必ず連番というわけではないです。任意の名称で上記のものを設定できれば問題ありません。
pelican
2018/05/08 07:51
説明不足で申し訳ありません。正規表現の部分を纏めて処理できるようにしたいです。纏めて処理を行う方法が思いつきませんでしたので現時点では未着手になります。
mts10806
2018/05/08 08:00
もう1点。数値以外が入力された場合はどのようにしたいのでしょうか？その辺りも要件として質問に追記してください。
mts10806
2018/05/08 08:00
要件次第では既に回答があるようにtype=numberだけでよくなります。
pelican
2018/05/08 08:07
質問内容を修正致しました。不備が多く申し訳ありません。
think49
2018/05/08 09:01
「整数（0以下の整数は除く）」は0を含みませんが、「value ="0~9の整数"」は0を含み、矛盾があります。