端口号校验需用自定义 validator 函数,先转数字并判空/nan,再检查是否为0–65535间整数;绑定时用 :rules 引入,v-model 保持字符串,配合 type="number" 和提示文案增强体验。

端口号校验在 Vue 3 表单中看似简单,但容易踩坑:后端传来的端口号是数字类型,而 v-model 绑定的输入框默认值是字符串,el-form 的 max/min 规则会按字符串比较(比如 "10" > "9"),导致数值范围校验失效。
用自定义 validator 替代 max/min
必须使用 validator 函数做数值解析和判断,不能依赖字符串级的 max 或 min:
- 先将输入值转为数字(
Number(value)或parseFloat(value)) - 检查是否为有效数字(排除空、
null、NaN) - 再与端口合法范围(0–65535)比对
推荐校验函数写法
以下函数可复用,兼容空值、字符串输入和边界值:

