如何验证多个文本框以确保它们仅包含字母？

Question

我需要使用javascript验证许多不同的文本框，并且我不想为每个文本框都使用getElementById。 在提交按钮之前，您将如何验证以确保每个文本框都包含一个单词？

    <table id="inputTable">
  <tr>
    <td>
      <P>Verb: <input type="text" required id="varA"></p>
      <P>Adjective: <input type="text" required id="varB"></p>
      <P>Noun (plural): <input type="text" required id="varC"></p>
      <P>Adjective: <input type="text" required id="varD"></p>
      <P>Verb enging in "ing": <input type="text" required id="varE"></p>
      <P>Verb: <input type="text" required id="varF"></p>
      <P>Number: <input type="text" required id="varG"></p>
      <P>Adjective: <input type="text" required id="varH"></p>
    </td>
    <td>
      <P>Noun (plural): <input type="text" required id="varI"></p>
      <P>Noun (plural): <input type="text" required id="varJ"></p>
      <P>Noun (plural): <input type="text" required id="varK"></p>
      <P>Relative (plural): <input type="text" required id="varL"></p>
      <P>Adjective: <input type="text" required id="varM"></p>
      <P>Adjective: <input type="text" required id="varN"></p>
      <P>Noun (plural): <input type="text" required id="varO"></p>
      <P>Verb: <input type="text" required id="varP"></p>
    </td>
  </tr>

Answer 1

 function submit_form() { all_input = document.querySelectorAll('input[type="text"]'); console.log(all_input); for (var i = 0; i < all_input.length; ++i) { if (all_input[i].value.trim().match(/\\w/) == null) { alert("You need to enter a word in each text box"); return } } } document.getElementById('fm').addEventListener('click',submit_form) 

 <form > <table id="inputTable"> <tr> <td> <P>Verb: <input type="text" required id="varA"> </p> <P>Adjective: <input type="text" required id="varB"> </p> <P>Noun (plural): <input type="text" required id="varC"> </p> <P>Adjective: <input type="text" required id="varD"> </p> <P>Verb enging in "ing": <input type="text" required id="varE"> </p> <P>Verb: <input type="text" required id="varF"> </p> <P>Number: <input type="text" required id="varG"> </p> <P>Adjective: <input type="text" required id="varH"> </p> </td> <td> <P>Noun (plural): <input type="text" required id="varI"> </p> <P>Noun (plural): <input type="text" required id="varJ"> </p> <P>Noun (plural): <input type="text" required id="varK"> </p> <P>Relative (plural): <input type="text" required id="varL"> </p> <P>Adjective: <input type="text" required id="varM"> </p> <P>Adjective: <input type="text" required id="varN"> </p> <P>Noun (plural): <input type="text" required id="varO"> </p> <P>Verb: <input type="text" required id="varP"> </p> </td> </tr> <button type='submit' id="fm">SUbmit</button> </form> 

Answer 2

您可以为每个文本框使用$('input[type=text]')而不是getElementById。

Answer 3

将此属性添加到每个输入中： pattern="^[a-zA-Z]+$" -如果字段中不包含字母字符，它将阻止提交表单-假定它是html form 。

Answer 4

HTML5表单验证允许在pattern属性中使用正则表达式。 请参见MDN的数据表单验证]（ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation ）

Answer 5

您可以使用document.querySelectorAll返回document.querySelectorAll中元素的列表。

更多阅读

使用现有代码尝试以下脚本：

var txtbox = document.querySelectorAll("input[type=text]");
for(var i = 0;i<txtbox.length;i++)
{
  alert("Enter Text");
}