JavaScriptでの正規表現判定

Question

JavaScriptで郵便番号の入力形式（ハイフンなし7桁）を確認し、
正しくない場合alertを表示するプログラムを組みたいと考えています。

以下のように、getElementsByNameによって入力された文字列を取得し、
.test(/^\d{7}$/)でハイフンなし7桁か確認、
if(data == false) {alert("入力形式が正しくありません。")}で
falseのとき警告文を出せると考えたのですが全く動作しません。

var dataの後にconsole.logを入れると"test() is not a function"と言われたので、
testの使い方がおかしいのでしょうか･･･。

拙いコードですが、ご教授お願いいたします。

<script language="JavaScript">//正規表現チェック
 function RegEx(){
 var pcode = document.getElementsByName('zip11');
 var data = pcode[0].test(/^\d{7}$/);
 if(data == false) {alert("入力形式が正しくありません。")};
}
</script>

 <input 
 name="zip11"  
 onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');" required
 class="text"
 placeholder="郵便番号(ハイフンなし)"
 onkeyup="this.setAttribute('value', this.value);"
 onchange="RegEx()"
 value=""/>
<label class="label">郵便番号(ハイフンなし)</label>

Answer 1

入力値を使いたいなら value属性から拾ってください。

【<input>: 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#value

あと、testはRegExpのメソッドなので書き方が違います。

var data = /^\d{7}$/.test(pcode[0].value);
```**動くサンプル：**[https://jsfiddle.net/tL27qy94/](https://jsfiddle.net/tL27qy94/)

【RegExp.prototype.test() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test)

Comments

[yasu0716]

親切なご回答、大変ありがとうございました。
簡潔、かつ丁寧な説明に対し、ベストアンサーを贈らせていただきます。

Answer 2

参考までに

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [].forEach.call(document.querySelectorAll('input[pattern]'),x=>{
    x.addEventListener('change',e=>{
      var t=e.target;
      var reg=new RegExp("^$|^"+t.getAttribute('pattern')+"$");
      var n=t.nextElementSibling;
      if(!t.value.match(reg)){
        if(n===null || !n.classList.contains('err')){
          n=document.createElement('span');
          n.textContent=t.dataset["message"];
          n.classList.add('err');
          t.parentNode.insertBefore(n,t.nextSibling);
        }
      }else if(n && n.classList.contains('err')){
        t.parentNode.removeChild(n);
      }
    });
  });
});
</script>
<input type="text" name="zip11" pattern="[0-9]{7}" placeholder="郵便番号ハイフン無し" maxlength="7" data-message="入力形式が正しくありません。"><br>
<input type="text" name="zip12" pattern="[0-9]{3}-[0-9]{4}" placeholder="郵便番号ハイフンあり" maxlength="8" data-message="入力形式が正しくありません。"><br>

Comments

[yasu0716]

ご回答、ありがとうございました。
いただいたコードもスムーズに理解できるよう、勉強したいと思います。