前端应在输入阶段拦截非数字字符串，通过type="number"、oninput正则过滤、blur校验、表单提交前统一校验及API请求前兜底校验实现；后端仍需Spring Validation和全局异常处理确保安全。
Java 后端抛出 NumberFormatException，本质是前端传了非数字字符串（比如空串、纯字母、带空格的字符串、中文数字等）给后端做 Integer.parseInt() 或类似转换时失败。真正“在前端入参阶段拦截”，关键不是靠后端 try-catch，而是把校验逻辑前移到用户输入时或提交前——即在浏览器里就阻止非法值进入请求。
输入框直接限制只能输数字
对明确需要整数的字段（如年龄、数量、ID），用 HTML5 原生属性 + 简单 JS 增强：
-
type="number"：让浏览器默认只允许数字键、上下箭头、小数点（若需整数，配合
step="1"和min/max） -
oninput + 正则过滤：防止粘贴或手动输入非法字符
<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
（注意：此写法会清空负号和小数点；若需支持负整数，改用/[^-\d]/g，并额外判断负号位置） - 失去焦点时二次校验：用户可能绕过输入限制，blur 时检查是否为空或全空格，提示“请输入有效数字”
表单提交前统一校验（推荐）
比单个 input 控制更可靠，适合复杂表单：
- 获取所有待提交的数值型字段（如 class="need-number"）
- 对每个字段：
•trim()去首尾空格
• 判断是否为空字符串 → 拦截，提示“此项不能为空”
• 用!/^-?\d+$/.test(value)检查是否为合法整数（支持负数）
• 若不匹配，阻止event.preventDefault()，聚焦该字段并提示 - 示例片段：
if (!value.trim() || !/^-?\d+$/.test(value.trim())) {<br> alert('请输入有效的整数');<br> input.focus();<br> return false;<br> }
API 请求前再兜底（防绕过）
即使前端做了限制，恶意用户仍可禁用 JS 或用 curl 直接发请求。所以在 JS 发起 fetch/AJAX 前加一层轻量校验：
立即学习“Java免费学习笔记（深入）”；
- 构造请求体（如 JSON）时，对每个数值字段做
parseInt(val)并检查isNaN()，或直接用正则 - 例如：
const age = parseInt(formData.age); if (isNaN(age)) throw new Error('年龄格式错误'); - 这样可在发请求前就报错，避免无意义的网络调用和后端异常
配套后端建议（非拦截但必须做）
前端拦截不能替代后端校验。后端仍需：
- 用 Spring Validation（如
@Min(0) @Max(120)）对 DTO 字段声明约束 - 全局异常处理器捕获
MethodArgumentNotValidException和NumberFormatException，返回 400 + 清晰错误信息（如{"code":400,"msg":"参数 'age' 必须为有效整数"}） - 避免在 Controller 里裸写
Integer.parseInt()，优先用封装好的工具类或校验框架
