如何使用JavaScript正确验证XXX-XXX-XXXX格式的电话号码

你写的代码存在语法和规则逻辑问题，无法完成正确校验，具体调整方式如下：

原有代码问题 #

• 正则表达式未按JavaScript语法声明：直接写[0-9]{3}-[0-9]{3}-[0-9]{4}会被识别为普通运算代码，直接触发语法错误，根本无法执行test()方法
• 正则未加边界限制：就算语法写对，没有起止匹配符的话，只要字符串里包含一段符合XXX-XXX-XXXX的片段就会被判定为合法，比如test123-456-7890aaa这种非法输入也会误判通过

修正后可直接运行的完整代码 #

<body>
<div class="form"> 
<label for="phnum">Enter Phone Number (XXX-XXX-XXXX): </label> 
<input type="text" id="phnum"> 
<button onclick="validphnum()" type="button">Submit</button>
</div>
<script>
function validphnum() 
{
  // 获取输入值并自动去除首尾空白字符
  const inputVal = document.getElementById("phnum").value.trim();
  // 声明正则：^匹配字符串开头，$匹配字符串结尾，确保整个输入完全符合格式要求
  const phoneFormat = /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/;
  if (phoneFormat.test(inputVal)) {
      alert("Valid Phone Number");
  } else {
      alert("Invalid Phone Number");
  }
}
</script>
</body>

关键调整点 #

• 正则使用JS标准的字面量写法，用/包裹匹配规则，让其成为可调用test()方法的正则对象
• 给正则增加^和$边界符，保证输入内容从头到尾完全匹配XXX-XXX-XXXX格式，不会出现误判
• 增加trim()方法处理输入，避免用户不小心输入首尾空格导致校验失败
• 给if/else分支补充大括号，避免后续新增代码时出现作用域错误

内容的提问来源于stack exchange，提问作者DuDu