getelementsbyclassname 获取输入控件可行但返回 htmlcollection，需转数组（如[...el]或array.from）再遍历；仅支持纯类名匹配，多类名需同时存在；灵活筛选推荐 queryselectorall；校验前应过滤非表单元素。

直接用 getElementsByClassName 获取输入控件是可行的，但要注意它返回的是 HTMLCollection（类数组对象，不是真正的数组），不能直接调用 map、forEach 等数组方法，需先转为数组或用兼容方式遍历。

获取带校验类名的所有输入控件

假设你给需要校验的输入框统一加了 class 名，比如 validate-input：

• HTML 示例：
  <input type="text" class="validate-input">
<input type="email" class="validate-input required">
<textarea class="validate-input"></textarea>
• JS 获取方式：
  const inputs = document.getElementsByClassName('validate-input');
  这会选中所有含 validate-input 类的元素（包括 input、textarea、select 等）。

遍历并校验每个控件

因为 getElementsByClassName 返回的是实时的 HTMLCollection，推荐转成数组再操作，更安全灵活：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 用扩展运算符转数组：
  const inputsArray = [...document.getElementsByClassName('validate-input')];
  然后可用 inputsArray.forEach(input => { /* 校验逻辑 */ });
• 用 Array.from（兼容性更好）：
  Array.from(document.getElementsByClassName('validate-input')).forEach(input => { ... });
• 若只需兼容老浏览器（如 IE8+），也可用传统 for 循环：
  

  const inputs = document.getElementsByClassName('validate-input');<br>
  for (let i = 0; i 
    if (!inputs[i].value.trim()) { /* 提示为空 */ }<br>
  }

注意：class 名要准确匹配，不支持选择器语法

getElementsByClassName 只接受纯类名字符串，不能写 .validate-input 或多个类（如 'validate-input required'）——它会按空格拆分成多个独立类，要求元素**同时包含所有指定类名**：

• getElementsByClassName('a b') → 找同时有 class="a b" 的元素（即含 a 和 b 两个类）
• 如果只想找含 validate-input 的任意元素（不管是否还有其他类），就只传一个类名：'validate-input'
• 如需更灵活的选择（比如“含 validate-input 且是 input 类型”），建议改用 document.querySelectorAll('.validate-input')，它返回静态 NodeList，支持完整 CSS 选择器。

补充：校验前建议过滤非输入类元素

如果页面中有些带 validate-input 的元素不是表单控件（比如 div、span），可在遍历时加类型判断，避免报错：

• if (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)) { /* 执行校验 */ }
• 或更简洁地检查是否有 value 属性：if ('value' in el) { ... }

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南