JavaScript表单字母输入验证失效，请求排查错误及解决方案

我来帮你看看这段代码的问题哈，一眼就能发现几个明显的小问题，咱们一步步解决：

原代码的核心问题 #

• 事件绑定错误：你给输入框加的onclick事件代码没写完（document.form1....），这直接会导致语法错误，让整个脚本跑不起来。而且点击输入框的时候用户还没开始输入，这时候触发验证完全没必要。
• 验证时机不合理：如果是要限制输入内容，应该在用户输入时（oninput）或者表单提交时（onsubmit）触发验证，而不是点击输入框的时候。
• 正则表达式适配问题：原代码用了^[A-Za-z]+$，这个正则要求输入至少一个字母，但如果用户刚点击输入框还没输入，触发验证会直接弹出错误，体验很差。

解决方案 #

根据不同的需求，我给你两种可行的方案：

方案1：实时验证输入（输入时提示错误） #

这种方式会在用户输入过程中实时检查，不符合要求就提示：

function allLetter(inputtxt) {
  // 用*允许空值，用户刚开始输入时不会直接报错
  var letters = /^[A-Za-z]*$/; 
  if(inputtxt.value.match(letters)){
    // 清空HTML5自定义验证提示（如果之前有错误）
    inputtxt.setCustomValidity('');
    return true;
  }else{
    alert('Please input letters only');
    // 也可以用HTML5原生提示替代alert，更美观
    // inputtxt.setCustomValidity('Please input letters only');
    return false;
  }
}

对应的HTML：

<form action="#" id="form1" name="form1" method="post">
  <input 
    name="Forename" 
    type="text" 
    required="required" 
    id="Forename2" 
    oninput="allLetter(this)" <!-- 用this直接传递当前输入框元素 -->
  >
  <button type="submit">提交</button>
</form>

方案2：表单提交时验证（更友好） #

这种方式只会在用户点击提交按钮时验证，不会打断输入过程：

function allLetter(inputtxt) {
  // 提交时要求非空且全是字母，用+
  var letters = /^[A-Za-z]+$/; 
  if(inputtxt.value.match(letters)){
    return true;
  }else{
    alert('Please input letters only');
    return false;
  }
}

// 给表单绑定提交事件
document.getElementById('form1').addEventListener('submit', function(e) {
  var input = document.getElementById('Forename2');
  if(!allLetter(input)){
    e.preventDefault(); // 阻止表单提交，直到输入正确
  }
});

对应的HTML（不需要给输入框加onclick）：

<form action="#" id="form1" name="form1" method="post">
  <input 
    name="Forename" 
    type="text" 
    required="required" 
    id="Forename2" 
  >
  <button type="submit">提交</button>
</form>

进阶方案：直接禁止输入非字母字符 #

如果不想弹出提示，直接让用户输不了非字母，体验会更好：

document.getElementById('Forename2').addEventListener('input', function(e) {
  // 替换掉所有非字母的字符，只保留A-Za-z
  this.value = this.value.replace(/[^A-Za-z]/g, '');
});

对应的HTML就用最基础的表单结构就行，不需要额外的事件绑定。

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