JavaScriptで複数の正規表現判定

Question

JavaScriptで正規表現をチェックする機能を作りました。
入力が7文字でなかった場合、警告文が表示され、フォームの色が変わるものです。

今回は、複数のフォームに対してそれぞれに対応する正規表現に沿うか判定し、
エラーの場合同じ挙動を示させたいです。

そのためにswitchで分岐させてやろうと思ったのですが、上手くいきません。
switch文のcaseはid名そのままではないのでしょうか･･･??
ちゃんと動くコードを書くにはどこを変えればいいのでしょうか。

また、switch以外に見やすく短い解法はありますでしょうか。

//以前作ったもの
function RegEx(id){
    var code = document.getElementById(id);
    var obj2 = document.getElementById('error');
    var data = /^\d{7}$/.test(code.value);
    if(data == false) {
        obj2.style.opacity = '1';
        document.getElementById('zip11').style.backgroundColor = '#eeedb2';
        }else{
        obj2.style.opacity = '0';
        document.getElementById('zip11').style.backgroundColor = '#ffffff';
    };

};

//今回作っているもの
function RegEx(id){
    var code = document.getElementById(id);
    var obj2 = document.getElementById('error');
    switch( code ){
         case 'zip11':
             var data = /^\d{7}$/.test(code.value);
             break;
         case 'tell':
             var data = /^\d{11}$/.test(code.value);
             break;
    }
    if(data == false) {
        obj2.style.opacity = '1';
        document.getElementById('zip11').style.backgroundColor = '#eeedb2';
        }else{
        obj2.style.opacity = '0';
        document.getElementById('zip11').style.backgroundColor = '#ffffff';
    };
};

Comments

[tanishi_a]

全体がわからないですが、switch (code) ではなく、switch (id) では？

Answer 1

---

ちゃんと動くコードを書くにはどこを変えればいいのでしょうか。

1個め

switch (code) { 

　↓

switch (id) { 

2個め

document.getElementById('zip11').style.backgroundColor = ...

　↓

document.getElementById(id).style.backgroundColor = ...

---

また、switch以外に見やすく短い解法はありますでしょうか。

この場合は、正規表現のパターンを連想配列?に入れておけば、
id ごとに switch で分岐する必要はなくなります。

var patterns = {
  zip11: /^\d{7}$/,
  tel: /^\d{11}$/
};
var data = patterns[id].test(code.value);

---

※ 他に気になること

• tell は綴りが違わないか
• else のところのインデントがずれてる
• 最後の2行とも、セミコロン不要
• 関数名 RegEx、変数名 obj2 は命名が雑
• 非表示は style.opacity より style.visibility で切り替えたほうが意味的には良さそうに思う

Answer 2

codeはElementでcaseは文字列なので何も一致しないと思います。

Answer 3

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [].forEach.call(document.querySelectorAll('[pattern]'),x=>{
    x.addEventListener('change',e=>{
      var t=e.target;
      var reg=new RegExp("^"+t.getAttribute("pattern")+"$");
      t.style.backgroundColor=t.value.match(reg)?"#ffffff":"#eeedb2";
    });
  });
});
</script>
<input type="text" pattern="[0-9]{7}" placeholder="7文字"><br>
<input type="text" pattern="[0-9]{11}" placeholder="11文字"><br>