如何使用Jquery实现表单字段禁止输入空格与特殊字符的验证

可以通过两种方式配合实现校验，分别是实时输入拦截、表单提交兜底校验，具体代码如下：

前置准备 #

确保页面已经引入jQuery库，再执行后续代码。

方式1：实时拦截不符合规则的输入 #

用户输入/粘贴内容时直接过滤掉空格、特殊字符，避免无效内容被输入：

$('#ref').on('input', function() {
  // 正则规则可按需调整，当前规则仅保留中英文、数字，过滤所有空格、特殊字符
  // 若不需要支持中文，删除正则中的\u4e00-\u9fa5即可
  const validValue = $(this).val().replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '');
  $(this).val(validValue);
});

方式2：表单提交时校验 #

作为最后一层兜底校验，避免前端拦截被绕过的情况：

// 选择器替换为你实际使用的表单ID
$('#yourFormId').on('submit', function(e) {
  const inputVal = $('#ref').val();
  // 校验规则和实时拦截保持一致即可
  const validateReg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
  if (!validateReg.test(inputVal)) {
    alert('Reference字段不能包含空格、特殊字符，仅支持中英文、数字');
    e.preventDefault(); // 阻止表单提交
    return false;
  }
});

翻译后的表单代码 #

<label for="ref">参考编号</label>
<input class="btn btn-primary" id="ref" name="参考编号"> 

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