在jQuery Validator中设置允许字母数字及空格的验证规则

嘿，我明白你的问题了——默认的jQuery Validator alphanumeric 规则确实只允许字母和数字，空格会被判定为非法字符。要实现「允许空格但禁止特殊符号」的需求，我们可以通过两种简单的方法搞定：

方法1：重写默认的alphanumeric验证规则 #

如果你想直接复用alphanumeric这个规则名，只需要覆盖它的正则表达式，加入对空格的支持即可：

// 重写默认的alphanumeric方法，允许空格
$.validator.addMethod("alphanumeric", function(value, element) {
  // 正则匹配字母、数字和空格，忽略大小写
  return this.optional(element) || /^[a-zA-Z0-9 ]+$/i.test(value);
}, "Letters, numbers and spaces only please");

$(document).ready(function () {
  $('#myform').validate({
    rules: {
      field: {
        required: true,
        alphanumeric: true // 依然使用原规则名，但逻辑已更新
      }
    },
    submitHandler: function (form) {
      alert('valid form submitted');
      return false;
    }
  });
});

方法2：自定义新的验证规则（推荐，不影响默认规则） #

如果你不想改动原有的alphanumeric规则（避免影响其他地方的使用），可以自定义一个专属规则，比如alphanumericWithSpace：

// 自定义支持空格的字母数字验证规则
$.validator.addMethod("alphanumericWithSpace", function(value, element) {
  return this.optional(element) || /^[a-zA-Z0-9 ]+$/i.test(value);
}, "Letters, numbers and spaces only please");

$(document).ready(function () {
  $('#myform').validate({
    rules: {
      field: {
        required: true,
        alphanumericWithSpace: true // 使用自定义规则
      }
    },
    submitHandler: function (form) {
      alert('valid form submitted');
      return false;
    }
  });
});

对应的HTML代码保持不变：

<form id="myform"> 
  <input type="text" name="field" /> 
  <br/> 
  <input type="submit" /> 
</form>

关键说明 #

两种方法的核心都是调整正则表达式：^[a-zA-Z0-9 ]+$ 表示输入内容只能由大小写字母、数字和空格组成，完全符合你「禁止特殊字符但允许空格」的需求。如果需要支持其他字符（比如下划线），只需要在正则的方括号里加入即可（比如[a-zA-Z0-9 _]）。

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