输入合法内容仍弹出错误提示，表单验证逻辑问题求助

问题根源 #

你的判断逻辑完全错误：你把输入框的字符串值和正则验证返回的布尔值做相等/不等比较，这两种类型永远不可能相等，导致逻辑彻底失效：

• 用first.value != res时，字符串和布尔值比较结果始终为true，所以每次点击按钮都会弹出错误提示
• 用first.value = res时这是赋值操作而非比较，当验证通过（res为true）时，赋值后条件结果为true才会弹出提示，验证失败时条件为false无反应，完全不符合验证逻辑

修正方案 #

直接判断正则验证的结果res：当res为false时，说明输入不符合规则，弹出错误提示。另外如果是表单提交场景，需要阻止默认的表单提交行为，避免页面刷新。

修正后的JavaScript代码：

let first = document.getElementById('name');

function check(e) {
  // 阻止默认表单提交行为（针对submit类型按钮）
  e.preventDefault();
  
  var pattern = /^[a-zA-Z]+$/;
  var res = pattern.test(first.value);

  // 验证不通过时弹出错误
  if (!res) {
    alert('Invalid First Name');
  } else {
    // 验证通过可执行后续逻辑，比如提交表单
    alert('First Name is valid');
    // 如需提交表单可取消注释：document.querySelector('form').submit();
  }
}

对应的HTML需修改按钮的onclick，传入事件对象：

<div class="form-group">
  <input id="name" type="text" placeholder="Name" name="name">
</div>
<button type="submit" class="btn btn-primary signupbtn" onclick="check(event)">
Sign Up
</button>

额外说明 #

• 正则/^[a-zA-Z]+$/仅允许纯英文字母，若需支持空格或其他字符可调整正则，比如允许空格：/^[a-zA-Z\s]+$/
• 建议给输入框添加required属性，强制用户输入内容：<input id="name" type="text" placeholder="Name" name="name" required>

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