正規表現での桁数指定

Question

よろしくお願い致します。
フォームのonSubmitをしようしてフォーム送信中止を実装しています。

		<script>

			function check(){
				var flag = 0;
				if(document.form.pass.value.match(/[^0-9]+/)){
					flag = 1;
				}
				if(flag){
					return false;
				}else{
					return true;
				}
			}
		</script>

半角数字のみは上記のようにできたのですが、ここに10桁のみの条件も実装したいです。
以内という条件ならば
/[^0-9]{10,10}+/
でもいいのかなと書いてみましたが、10桁のみは実装されず、半角数字のみの方も効かなくなりました。

Comments

[m.ts10806]

起きた現象を書いて下さい。こういったチェックはチェックパターンを幾つか試して何がOKで何がNGかを提示されたほうが回答もつきやすいです。　>ダメでした。

[neruhi]

追記いたしました！

Answer 1

<input>にminlength属性がありますので、フォーム送信時にチェックしたいだけならminlength=10 maxlength=10とすることで、対応ブラウザ（iOS 10.3以上、Edge 17以上、Chrome 40以上、Firefox 51以上）ではJavaScriptを書かずに実現可能です。

Comments

[neruhi]

こちらを使っていたのですが、使わずにやってみなさいとのことで。。。

[yambejp]

htmlの機能をつかうならpatternの指定も有効ですね

[neruhi]

patternも使わず考えてみなさいと、言われておりまして。。。：

Answer 2

半角数字のみは上記のように

[^0-9]だと「数字以外」では？ → [0-9]もしくは\d

10桁のみ

{10} でどうでしょう？

そうじて、/^\d{10}$/

追記

元のソースを最大限使うと、「0-9以外」「9文字以内」「11文字以上」の3つをチェックする必要があります

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#hoge').addEventListener('input',function(e){
    document.querySelector('#check1').value=check1()?"ok":"ng";
    document.querySelector('#check2').value=check2()?"ok":"ng";
  });
});
function check1(){
  var flag = 0;
  if(document.querySelector('#hoge').value.match(/[^0-9]+|^.{0,9}$|.{11}/)){
    flag = 1;
  }
  if(flag){
    return false;
  }else{
    return true;
  }
}
function check2(){
  return document.querySelector('#hoge').value.match(/^\d{10}$/);
}
</script>
<form>
<input type="text" id="hoge" name="hoge"><br>
check1:<input type="text" id="check1"><br>
check2:<input type="text" id="check2"><br>
</form>

Comments

[yambejp]

あ、「0-９」以外でフラグをたてて、falseを返しているのですね？
マッチしたときだけtrueにするほうがよいですね

[neruhi]

詳細にありがとうございます！　きちんと読んで理解します。