如何在HTML中实现输入框仅允许输入2个字符的验证

最简实现方案 #

你要实现仅允许输入2个字符的限制，最简单的方式是直接给input标签添加原生maxlength="2"属性，修改后代码如下：

<input name="onkirmizi[]" type="text" class="form-control" tabindex="1" maxlength="2">

疑问1：该输入框是否必须放在form标签内部？ #

• 如果你仅用maxlength限制输入长度，或是单独使用该输入框、不需要提交表单/触发HTML5原生表单校验逻辑，不需要放在form标签内，长度限制规则可以正常生效。
• 如果你需要用到表单提交功能、或是要触发HTML5自带的表单提交校验，才需要将输入框放在form标签内部。

疑问2：实现该验证是否需要添加JS文件，若需要应当如何操作？ #

• 仅实现「最多输入2个字符」的基础限制完全不需要额外添加JS文件，maxlength是浏览器原生支持的属性，兼容性极好，直接添加即可生效。
• 如果你需要更定制化的验证逻辑（比如仅允许输入特定类型字符、自定义输入超限的提示效果、增加最小输入长度校验等），也不需要单独引入外部JS文件，直接在当前页面添加script代码块即可实现，示例如下：

<input name="onkirmizi[]" type="text" class="form-control" tabindex="1" id="targetInput">
<script>
const inputEl = document.getElementById('targetInput')
inputEl.addEventListener('input', () => {
  // 超过2个字符自动截断
  if (inputEl.value.length > 2) {
    inputEl.value = inputEl.value.slice(0, 2)
    // 可自行添加自定义提示逻辑
    console.log('最多允许输入2个字符')
  }
})
</script>

内容的提问来源于stack exchange，提问作者magic bean