表单验证：按规则设置手机号与产品ID文本框边框颜色

需求说明 #

• 手机号输入框：内容符合「3位数字+半角空格+3位数字+半角空格+4位数字」格式（如123 456 7890）时边框为绿色，否则为红色
• 产品ID输入框：内容为RW100、RW101、RW102、RW103、RW200、RW201、RW202或RW203时边框为绿色，否则为红色

修正后的完整代码 #

<!-- HTML结构 -->
<input type="text" id="phoneno" placeholder="请输入手机号" oninput="phoneNumber()">
<input type="text" id="prodname" placeholder="请输入产品ID" oninput="idCheck()">

<script>
// 产品ID验证函数
function idCheck() {
  const prodNameBox = document.getElementById("prodname");
  const prodname = prodNameBox.value;
  // 用数组存储合法ID，简化条件判断
  const validIds = ['RW100', 'RW101', 'RW102', 'RW103', 'RW200', 'RW201', 'RW202', 'RW203'];
  prodNameBox.style.borderColor = validIds.includes(prodname) ? 'green' : 'red';
}

// 手机号验证函数
function phoneNumber() {
  const phonenoBox = document.getElementById("phoneno");
  const phoneno = phonenoBox.value;
  // 正则严格匹配指定格式：开头1-9数字+2位数字+半角空格+3位数字+半角空格+4位数字
  const phoneRegex = /^[1-9]\d{2}\s\d{3}\s\d{4}$/;
  phonenoBox.style.borderColor = phoneRegex.test(phoneno) ? 'green' : 'red';
}
</script>

关键修正与优化说明 #

• 产品ID验证：原代码错误使用innerText获取输入框内容，输入框内容需通过value属性获取；将合法ID存入数组，用includes()方法简化条件判断，代码更简洁易维护。
• 手机号验证：原代码存在phoneno.value.match的错误（phoneno已经是输入框的value值），改用正则的test()方法更高效；正则添加首尾锚定^和$，确保输入内容完全符合格式，避免部分匹配的情况。
• 绑定oninput事件，实现输入时实时验证，提升用户交互体验。

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