如何验证多个文本框以确保它们只有字母？答案

【问题标题】：How to validate multiple text boxes to make sure they have letters only?如何验证多个文本框以确保它们只有字母？
【发布时间】：2016-10-21 02:31:36
【问题描述】：

我需要使用 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>

【问题讨论】：

Get list of all `input` objects using JavaScript, without accessing a `form` object的可能重复
document.querySelectorAll("input") 为您提供页面上所有输入元素的列表。或者你可以给他们一个共同的班级并从中选择。然后只需循环它们并测试这些值。顺便说一句，如果他们要提交，他们不应该有一个name 属性吗？
你已经使用了requiredhtml5属性，那就不用担心每个文本框都有一个字！！！

标签： javascript html

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

将此属性添加到每个输入：pattern="^[a-zA-Z]+$" - 如果字段中包含除字母字符以外的任何其他内容，它将阻止提交表单 - 假设这是在 html form 中。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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