jQuery用户名校验异常：校验不通过时输入框边框未变红

问题成因 #

• 正则表达式语法错误：校验规则里/^[A-Za-z0-9\w]{4,20}*$/的{4,20}量词后额外加了*，属于非法正则语法，调用test方法时会直接抛出异常，导致后续修改边框的逻辑无法执行；同时\w本身就包含大小写字母、数字和下划线，前面再加A-Za-z0-9属于冗余定义。
• 未监听DOM就绪事件：如果JS代码写在页面DOM元素之前（比如放在head标签内），执行时#signup、#inputName元素还未渲染，事件绑定会直接失败，点击按钮没有任何反应。
• 未阻止submit按钮默认行为：如果当前按钮嵌套在form表单内，点击type="submit"的按钮会触发表单默认提交、页面刷新，刚修改的边框样式会因为页面刷新看不到效果。
• 边框样式设置不完整：部分浏览器默认输入框的border-style不是solid，仅修改border-color不会生效，需要同时指定边框样式才会显示对应颜色。
• 未引入jQuery依赖：代码中使用了$等jQuery语法，如果没有提前引入jQuery库，代码会直接报错无法执行。

解决方法 #

1. 修正正则表达式，删除多余的*和冗余的匹配规则，修改为/^\w{4,20}$/即可满足4-20位字母、数字、下划线的校验要求。
2. 将所有JS逻辑包裹在jQuery的DOM就绪回调$(function() { ... })中，确保元素渲染完成后再绑定事件。
3. 点击事件中添加e.preventDefault()阻止表单默认提交行为，或者直接将按钮的type="submit"修改为type="button"。
4. 修改边框样式时直接设置完整的边框属性，避免因为默认样式导致颜色不生效。
5. 确保在所有自定义JS代码执行前，已经正确引入jQuery本地库。

修正后完整代码 #

页面结构代码 #

<!-- 确保提前引入jQuery本地库 -->
<script src="jquery.min.js"></script>
<div id="name">
    <input type="text" id="inputName" placeholder="Name">
</div>
<input id="signup" type="button" value="SIGN UP">

JS逻辑代码 #

// DOM就绪后再执行逻辑
$(function() {
  function isName(inputName){
      var regex = /^\w{4,20}$/;
      return regex.test(inputName);
  }

  $("#signup").click(function (e) {
      // 如果保留submit类型按钮，可加下面这句阻止默认提交行为
      // e.preventDefault();
      if (!isName($("#inputName").val())) {
          // 直接设置完整边框属性，确保样式生效
          $("#inputName").css("border", "1px solid #E33100");
      }
  })
})

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