在前端表单交互场景中，校验用户输入的内容是否为合法的字母数字字符串是常见需求，这类校验可以避免包含特殊符号、中文等非法内容的提交，减少后端的数据处理压力。合法字母数字字符串通常指仅由大小写英文字母（A-Z、a-z）和阿拉伯数字（0-9）组成的字符串，长度可以根据业务需求自定义限制。
核心校验思路
使用jQuery完成字母数字字符串校验的核心逻辑分为三步：首先获取输入框的当前值，然后定义匹配字母数字的正则表达式，最后通过正则的test方法判断输入值是否符合要求。需要注意的是，要先处理输入值的首尾空格，避免用户误输入空格导致校验误判。
正则表达式说明
匹配字母数字的基础正则表达式为^[A-Za-z0-9]+$，其中各部分的含义如下：
^：匹配字符串的开始位置[A-Za-z0-9]：字符集，匹配任意大小写英文字母和数字+：匹配前面的字符集一次或多次，确保字符串至少有一个字符$：匹配字符串的结束位置
如果允许空字符串通过校验，可以把+替换为*，即^[A-Za-z0-9]*$。
完整实现示例
下面是一个完整的页面示例，包含输入框、校验按钮和结果提示区域，使用jQuery实现输入值的字母数字校验：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery字母数字校验示例</title>
<script src="https://ipipp.com/jquery/3.6.0/jquery.min.js"></script>
<style>
.tip {
margin-top: 10px;
font-size: 14px;
}
.success {
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>
<div>
<label for="inputVal">请输入内容：</label>
<input type="text" id="inputVal" placeholder="仅支持字母和数字">
<button id="checkBtn">校验</button>
</div>
<div class="tip" id="resultTip"></div>
<script>
$(function() {
// 点击校验按钮触发逻辑
$('#checkBtn').on('click', function() {
// 获取输入框的值并去除首尾空格
var inputValue = $.trim($('#inputVal').val());
// 定义字母数字校验正则，不允许空字符串
var reg = /^[A-Za-z0-9]+$/;
var $tip = $('#resultTip');
if (inputValue === '') {
$tip.text('输入内容不能为空').removeClass('success').addClass('error');
return;
}
// 执行正则校验
if (reg.test(inputValue)) {
$tip.text('输入内容合法，为字母数字字符串').removeClass('error').addClass('success');
} else {
$tip.text('输入内容不合法，仅支持大小写字母和数字').removeClass('success').addClass('error');
}
});
// 输入框实时校验（可选）
$('#inputVal').on('input', function() {
var inputValue = $.trim($(this).val());
var reg = /^[A-Za-z0-9]+$/;
var $tip = $('#resultTip');
if (inputValue === '') {
$tip.text('');
return;
}
if (reg.test(inputValue)) {
$tip.text('输入内容合法').removeClass('error').addClass('success');
} else {
$tip.text('输入内容不合法，仅支持大小写字母和数字').removeClass('success').addClass('error');
}
});
});
</script>
</body>
</html>
常见误区与优化
误区1：忽略空值处理
如果直接使用^[A-Za-z0-9]+$正则校验空字符串，会返回false，但部分场景下需要单独提示用户不能为空，而不是统一提示字符不合法，因此建议先判断空值再执行正则校验。
误区2：未处理首尾空格
用户在输入时可能会误输入首尾空格，比如输入 abc123 ，如果不处理空格，正则校验会判定为不合法，因此需要使用$.trim()或者原生的trim()方法处理输入值。
优化：自定义校验函数
如果多个地方需要用到相同的校验逻辑，可以把校验逻辑封装成独立函数，提升代码复用性：
/**
* 校验字符串是否为合法的字母数字字符串
* @param {string} str 待校验的字符串
* @param {boolean} allowEmpty 是否允许空字符串，默认不允许
* @returns {boolean} 校验结果
*/
function checkAlnum(str, allowEmpty = false) {
// 处理输入值，去除首尾空格
var val = typeof str === 'string' ? str.trim() : '';
// 允许空字符串的情况
if (allowEmpty && val === '') {
return true;
}
// 正则校验
return /^[A-Za-z0-9]+$/.test(val);
}
// 使用示例
var testStr1 = 'Abc123';
console.log(checkAlnum(testStr1)); // 输出 true
var testStr2 = 'Abc_123';
console.log(checkAlnum(testStr2)); // 输出 false
总结
使用jQuery校验输入值是否为合法字母数字字符串的核心是结合正则表达式，同时注意处理空值、首尾空格等边界情况。通过封装通用校验函数，可以进一步提升代码的可维护性，适配更多业务场景的校验需求。