javascript - 从 javascript 中的 for() 中排除一个以 'ElementByName' 结尾的数组

Question

首先，对帖子的标题感到抱歉。

我正在尝试从这些问题中获取引用: GetElementsByName with array like name

getElementsByName: control by last partial name

How can I select an element by ID with jQuery using regex?

我或多或少地理解了如何进行。

我正在使用此代码检查所有 <input>如果任何字段为空，则阻止提交表单:

  $('form[id="insertForm"]').on("submit", function (e) {
    var form = document.getElementById("insertPanel");
    var inp = form.getElementsByTagName('input');
    for(var i in inp){
      if(inp[i].type == "text"){
        if(inp[i].value == ""){
          inp[i].focus();
          e.preventDefault();
          $("#formAlert").show(400);
          break;
        }
      }
    }
  });

“问题”是我被要求添加一个异常(exception)，其中之一是 <input>可以为空。

表格类似这样，我这里贴的是简化版:

<form id="insertForm" >
    <div id="insertPanel">
        <input type="text" name="FOO1" id="FOO1" />
        <input type="text" name="FOO2" id="FOO2" />
        <input type="text" name="FOO3" id="FOO3" />
        <input type="text" name="FOO4" id="FOO4" />
        <button type="submit" name="submit" value="Submit" >Send</button>

        <table id="tab_logic">
            <thead>
                <tr>
                    <th>Bar1</th>
                    <th>Bar2</th>
                    <th>Bar3</th>
                    <th>Bar4</th>
                    <th>Bar5</th>
                    <th>Bar6</th>
                    <th>Bar7</th>
                    <th>Bar8</th>
                    <th>Bar9</th>
                </tr>
            </thead>
            <tbody>
                <tr id='addr_100'>
                    <td>
                        <input type="text" name='prefs[0][FooBar_A]' />
                    </td>
                    <td>
                        <input type="text" name='prefs[0][FooBar_B]' />
                    </td>
                    <td>
                        <input type="text" name='prefs[0][FooBar_C]' />
                    </td>
                    <td>
                        <input type="text" name='prefs[0][FooBar_D]' />
                    </td>
                    <td>
                        <input type="text" name='prefs[0][FooBar_E]' />
                    </td>
                    <td>
                        <input type="text" name='prefs[0][FooBar_F]' />
                    </td>
                    <td>
                        <input type="text" name='prefs[0][FooBar_G]' />
                    </td>
                    <td>
                        <input type="text" name='prefs[0][FooBar_H]'/>
                    </td>
                    <td>
                        <input type="text" name='prefs[0][FooBar_I]' />
                    </td>
                </tr>
                <tr id='addr_101'/>
            </tbody>
        </table>

        <a id="add_row">Add Row</a>&nbsp;
        <a id='delete_row'>Delete Row</a>
    </form>

我删除了所有的 CSS。保持真的很简单。

我被要求不检查输入 <input type="text" name='prefs[0][FooBar_G]' />

如您所见，它是一个数组，在每次单击“添加行”时，都会有一个 jquery 添加新行 name='prefs[1][FooBar_A]'等等。

我试着在 for() 上工作:

  $('form[id="insertForm"]').on("submit", function (e) {
    var form = document.getElementById("insertPanel");
    var inp = form.getElementsByTagName('input');
    var SKIP = form.querySelectorAll('input[name$="FooBar_G]"]');
    for(var i in inp){
      if(inp[i].type == "text"){
        if(inp[i].value == ""){
          if (SKIP){ console.log("Element " + SKIP.innerText + " found. "); continue; }
          inp[i].focus();
          e.preventDefault();
          $("#formAlert").show(400);
          break;
        }
      }
    }
  });

还有许多其他版本..失败了。

有人知道如何让它工作吗？

Answer 1

let inputs = [...document.querySelectorAll('input')]
let reg = new RegExp('FOO[0-9]', 'g')

let filtered = inputs.filter(({ name }) => name.match(reg))

console.log(filtered)

<input type="text" name="FOO1" id="FOO1" />
<input type="text" name="FOO2" id="FOO2" />
<input type="text" name="FOO3" id="FOO3" />
<input type="text" name="FOO4" id="FOO4" />

<input type="text" name='prefs[0][FooBar_A]' />
<input type="text" name='prefs[0][FooBar_B]' />
<input type="text" name='prefs[0][FooBar_C]' />
<input type="text" name='prefs[0][FooBar_D]' />

$('form[id="insertForm"]').on("submit", function (e) {
  var form = document.getElementById("insertPanel")
  var reg = new RegExp('FOO[0-9]', 'g')
  var inputs = [...document.querySelectorAll('input')].filter(({name}) => name.match(reg))
  inputs.forEach((inp, i) => {
    if(inp[i].type === "text" && inp[i].value === ""){
      inp[i].focus();
      $("#formAlert").show(400);
    }
  })
});