JavaScriptのバリデートが表示されません。

指定の正規表現、文字数以外を記入するとアラートが表示されるようにしているつもりです。。。

文字数制限のほうはきちんと作用してくれるのですが、半角数字指定の方がきちんと表示されてくれません。
どこが間違えているのか教えていただきたいです。

よろしくお願い致します！

html
1<html>
2	<head>
3		<link href="css/index.css" rel="stylesheet" type="text/css">
4	</head>
5	<body>
6		<form action="login.php" method="post" class="checkform">
7			<p>
8				<input type="password" name="pass" size="20" placeholder="(例)10" class="password" required >
9				<span class="alertarea"></span>
10			</p>
11			<input type="submit" value="submit" name="submit">
12		</form>
13//ここに下記のjavascript
14	</body>
15</html>
16

javascript
1		<script type="text/javascript">
2			document.addEventListener('DOMContentLoaded', function() {
3
4				// 半角数字３文字未満の入力チェック　始まり
5			  var targets = document.getElementsByClassName('password');
6			  for (var i=0 ; i<targets.length ; i++) {
7			    // 文字が入力されたタイミングでチェックする：
8			    targets[i].oninput = function () {
9			      var alertelement = this.parentNode.getElementsByClassName('alertarea');
10
11						 // 半角数字以外の文字があるかどうかを判断
12						 if(( this.value != '') && ( this.value.match( /^[0-9]/ ))) {
13							 // ▼英数字以外の文字があれば
14							 if( alertelement[0] ) { alertelement[0].innerHTML = "入力には半角数字だけが使えます。"; }
15							 this.style.border = "2px solid red";
16						 }
17						 // 空白を除いた入力文字数が２文字よりも多いかどうかを判断
18			      if( this.value.trim().length > 2 ) {
19			        // 空白を除いた入力文字数が3文字よりも大きければ
20			        if( alertelement[0] ) { alertelement[0].innerHTML = "入力文字数が多すぎます。2文字以下を入力して下さい。"; }
21			        this.style.border = "2px solid red";
22			      }
23			      else {
24			        // 何も入力がないか、または半角数字2文字以下しかないなら
25			        if( alertelement[0] ) { alertelement[0].innerHTML = ""; }
26			        this.style.border = "1px solid black";
27			      }
28			    }
29			  }
30				// 半角数字３文字未満の入力チェック　終わり
31
32			});
33		</script>
34

行動規範の内容に同意します

回答3件

// 半角数字以外の文字があるかどうかを判断
if(( this.value != '') && ( this.value.match( /^[0-9]/ ))) {
	// ▼英数字以外の文字があれば
	if( alertelement[0] ) { alertelement[0].innerHTML = "入力には半角数字だけが使えます。"; }
	this.style.border = "2px solid red";
}
// 空白を除いた入力文字数が２文字よりも多いかどうかを判断
if( this.value.trim().length > 2 ) {
	// 空白を除いた入力文字数が3文字よりも大きければ
	if( alertelement[0] ) { alertelement[0].innerHTML = "入力文字数が多すぎます。2文字以下を入力して下さい。"; }
	this.style.border = "2px solid red";
}

↑半角数字チェックの結果がどうあれ、必ず文字数チェックを実行してしまうため、文字数チェックの結果しか残らないのです。

投稿2018/06/04 07:57

tkturbo

総合スコア5572

neruhi

2018/06/04 08:12

そういうことですね。。。ありがとうございます！

行動規範の内容に同意します

ベストアンサー

こんな感じで

javascript
1document.addEventListener('DOMContentLoaded', function() {
2  [].forEach.call(document.getElementsByClassName('password'),function(x){
3    x.addEventListener('input',function(e){
4      var t=e.target;
5      var alertarea=t.form.querySelector('.alertarea');
6      if(t.value !=='' && t.value.match( /[^0-9]/ )){
7        alertarea.textContent = "入力には半角数字だけが使えます。";
8      }else if(t.value.trim().length > 2 ) {
9        alertarea.textContent = "入力文字数が多すぎます。2文字以下を入力して下さい。";
10      }else {
11        alertarea.textContent ="";
12      }
13    });
14  });
15});

HTML
1<form class="checkform">
2<p>
3<input type="password" name="pass" size="20" placeholder="(例)10" class="password" required >
4<span class="alertarea"></span>
5</p>
6<input type="submit" value="submit" name="submit">
7</form>

投稿2018/06/04 07:52