javascript 関数などを使って纏めて処理を行いたい場合

Question

テキストにユーザーの入力欄（整数の入力）が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を使って「入力された数値は使用できません」などのようにしたいです。

Comments

[m.ts10806]

JavaScriptの方もコードブロック```で囲っておいてください。また、ID必ず連番でしょうか？連番以外の任意の名称でも対応できるような形が目標でしょうか？

[m.ts10806]

「正規表現で整数（0以下の整数は除く）のみ入力できるよう設定」の部分は未着手ですか？

[退会済みユーザー]

コード修正致しました。ご指摘ありがとうございます。IDは必ず連番というわけではないです。任意の名称で上記のものを設定できれば問題ありません。

[退会済みユーザー]

説明不足で申し訳ありません。正規表現の部分を纏めて処理できるようにしたいです。纏めて処理を行う方法が思いつきませんでしたので現時点では未着手になります。

[m.ts10806]

もう1点。数値以外が入力された場合はどのようにしたいのでしょうか？その辺りも要件として質問に追記してください。

[m.ts10806]

要件次第では既に回答があるようにtype=numberだけでよくなります。

[退会済みユーザー]

質問内容を修正致しました。不備が多く申し訳ありません。

[think49]

「整数（0以下の整数は除く）」は0を含みませんが、「value ="0~9の整数"」は0を含み、矛盾があります。

Answer 1

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 さん

Comments

[maisumakun]

<input type=number>でもstep（デフォルトで1）やmin、maxなどで値の制限はできますが、「キーボードからの入力自体は弾ききれない」ようですね…

[x_x]

pattern属性値は全体にマッチする必要があるので、通常^および$は不要です。

[think49]

To: maisumakun さん、x_x さん
フォローありがとうございます。
親記事に追記しました。

[退会済みユーザー]

返信が遅くなり申し訳ございません。
回答ありがとうございます、HTML側からのチェックも可能なのですね。
勉強になります！今後使う機会があれば使用してみたいと思います。

Answer 2

JavaScriptを持ち出すまでもなく、HTML5の機能で入力できるものを制限するほうが楽かと思います。

<input type='number' min='0' max='9' required （後略）>

Comments

[maisumakun]

なお、JavaScriptでフォームの「.checkValidity」メソッドを実行することで、送信しないタイミングで入力の整合性をチェックできます（requiredやtype=numberでの範囲外の数値チェックも、そのタイミングで合わせて行われます）。

[退会済みユーザー]

返信が遅くなり申し訳ありません。
回答ありがとうございました。このパターンだと記述も纏まり楽ですね。
今後の参考にさせていただきます！

Answer 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">

Comments

[退会済みユーザー]

返信が遅くなり申し訳ありません。
回答ありがとうございました。やりたいことが明確になっていて、例としてとても参考になりましたので
ベストアンサーにさせていただきました！今後の参考とさせていただきます！