手机号验证中的正则表达式全局匹配问题

前言

在前端开发中，输入验证是保证数据质量和用户体验的关键步骤。尤其是在处理手机号验证时，确保用户输入的手机号符合标准格式是非常重要的。涉及全局匹配时，正则表达式的行为可能会带来一些意想不到的问题。

原因分析

正则表达式全局标志 (g) 和粘性标志 (y) 使得正则表达式能够在文本中查找多个匹配项。lastIndex 属性在全局匹配中用于记录下一个匹配的起始位置。然而，这个属性会影响匹配的行为，尤其是在动态输入的场景中。

假设你使用了全局标志的正则表达式来验证手机号：

const phoneNumberRegex = /^1\d{10}$/g;

当你在输入框中输入手机号时，lastIndex 会记录上一次匹配结束的位置。如果在输入过程中修改了内容，正则表达式可能会因为 lastIndex 的值不正确而无法正确匹配。这会导致验证失败或产生不一致的结果。

解决方案

全局匹配

每次验证时，重置 lastIndex。

const phoneNumberRegex = /^1\d{10}$/g;

function validatePhoneNumber(input) {
  // 重置 lastIndex
  phoneNumberRegex.lastIndex = 0;
  return phoneNumberRegex.test(input);
}

// 测试
const input1 = "13812345678";
const input2 = "12345678901";
console.log(validatePhoneNumber(input1)); // true
console.log(validatePhoneNumber(input2)); // false

非全局匹配

另一种更简单有效的解决方案是完全避免使用全局匹配。

const phoneNumberRegex = /^1\d{10}$/;

function validatePhoneNumber(input) {
  return phoneNumberRegex.test(input);
}

// 测试
const input1 = "13812345678";
const input2 = "12345678901";
console.log(validatePhoneNumber(input1)); // true
console.log(validatePhoneNumber(input2)); // false