JS姓名校验输首词加空格即返回true原因及单空格校验方法
现有校验Bug根因
原函数返回错误结果是三个逻辑漏洞叠加导致的:
split(' ')的拆分逻辑存在边界问题:当输入形如"Tom "(首单词后输入空格、未输入第二个单词)时,拆分结果为["Tom", ""],数组长度恰好为2,直接跳过了长度不符返回false的分支。filter结果判断完全失效:数组的filter方法无论筛选结果有没有元素,返回值始终是数组类型,在JS中数组属于truthy值,永远不会走到返回空串的分支。- 正则规则不符合要求:原正则
/[A-Za-z]+(\s+[A-Za-z]+)?/gi中第二个单词的匹配规则加了?可选量词,只要字符串里存在连续字母就会匹配成功,哪怕空格后没有内容;同时\s+规则允许1个以上的空白字符,根本无法实现“单词间仅1个空格”的限制。
正确校验实现
以下实现完全覆盖需求规则:首尾无多余空格、单词间仅1个半角空格、两个单词均为英文字母、单个单词长度3-30字符:
const validateInput = (value) => { // 正则锚定首尾,严格匹配规则:3-30位字母 + 1个空格 + 3-30位字母 const fullNameReg = /^[A-Za-z]{3,30} [A-Za-z]{3,30}$/ // 如果业务需要兼容用户误输入首尾空格的场景,可改为 return fullNameReg.test(value.trim()) return fullNameReg.test(value) }
校验效果验证
覆盖核心场景的校验结果如下:
- 输入
"Lucy "(首单词后输空格未填第二单词):返回false,修复原有提前通过的bug - 输入
"Lucy Li"(单词间2个空格):返回false,满足仅1个空格的限制 - 输入
"Lu Li"(单词长度不足3位):返回false,满足最小长度要求 - 输入
"Lucyliliabcdefghijklmnopqrstuvwxyz Li"(单词长度超30位):返回false,满足最大长度要求 - 输入
"Lucy Li"(合法格式):返回true
内容的提问来源于stack exchange,提问作者Main
相关产品推荐
相关产品推荐

