使用jQuery实现表单验证的代码是否正确？输入框首字符非数字验证异常

嘿，我一眼就看到你代码里的问题啦——你直接把输入框的值和正则表达式对象用==做比较，这肯定不对啊！字符串和正则对象是完全不同的类型，这种比较永远会返回false，所以不管你输入什么字母，都会走到else分支添加错误样式。

先给你理清楚正确的做法，再给你修正后的代码：

问题核心 #

正则表达式的正确使用方式是调用它的test()方法，把要检查的字符串传进去，它会返回true或false来表示是否匹配，而不是直接用==做比较。

修正后的代码 #

首先HTML部分保持不变：

<div class="input-group">
  <label for="c_name">Cashier Name
    <input id="c_name" type="text" name="cashier_name">
  </label>
</div>

然后是JavaScript部分，我做了两处关键修正，还优化了代码简洁度：

$(document).ready(function(){
  $("#c_name").keyup(function() {
    // 这里的正则：确保输入以字母开头，且全部由字母组成
    // 如果需要允许字母后跟着数字，改成 /^[A-Za-z][A-Za-z0-9]*$/ 即可
    var nameRegex = /^[A-Za-z]+$/;
    var inputValue = $(this).val();
    
    // 用test()方法验证输入是否符合规则
    if (nameRegex.test(inputValue)) {
      $(this).addClass("cash").removeClass("cashs");
    } else {
      $(this).addClass("cashs").removeClass("cash");
    }
  });
});

额外优化建议 #

如果你想允许用户还没输入内容（空值）的时候不触发错误样式，可以把判断条件改成这样：

if (inputValue === "" || nameRegex.test(inputValue)) {
  // 空值或符合规则时应用正确样式
  $(this).addClass("cash").removeClass("cashs");
} else {
  $(this).addClass("cashs").removeClass("cash");
}

这样用户刚开始输入前，输入框不会显示错误状态，体验会更好~

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