选择国家后自动在手机号输入框填充对应国家区号的实现方案咨询

1. 是否需要存储到数据库？ #

看你的业务场景判断即可：

• 需要存库的场景：后续有多端复用国家区号数据、需要动态调整国家/区号映射关系、服务端要做批量的手机号规则校验等需求，推荐存库统一维护
• 不需要存库的场景：仅当前单页面需要该功能、国家区号调整频率极低，完全没必要额外建表开发接口，直接前后端维护静态映射表即可，开发成本最低

2. 最简实现方案 #

直接在前端维护国家和区号的映射关系，监听下拉选择事件自动填充区号即可，代码修改参考如下：

第一步：修改下拉框option结构，增加自定义属性存区号 #

<div class="form-group">
  <label>Nationality</label>
  <select name="country" id="countrySelect">
    <option value="">Country...</option>
    <option value="Afghanistan" data-phone-code="+93">Afghanistan</option>
    <option value="Albania" data-phone-code="+355">Albania</option>
    <!-- 其余国家按这个格式补全data-phone-code属性即可 -->
    <option value="Zimbabwe" data-phone-code="+263">Zimbabwe</option>
  </select>
</div>

<div class="form-group">
  <label for="phone">Phone Number</label>
  <input id="phone" name="phone" placeholder="user's number " required="" type="tel">
  <!-- 注意把type从number改成tel，避免+号被识别为非数字无法输入 -->
</div>

第二步：增加JS监听事件，自动填充区号 #

const countrySelect = document.getElementById('countrySelect');
const phoneInput = document.getElementById('phone');
// 存储用户之前输入的手机号本体，避免切换国家的时候清空用户已输入内容
let userPhoneNumber = '';

countrySelect.addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  const countryCode = selectedOption.getAttribute('data-phone-code');
  // 提取用户已经输入的手机号本体（去掉之前的区号）
  if (phoneInput.value) {
    const matchResult = phoneInput.value.match(/^\+\d+\s?(.*)$/);
    userPhoneNumber = matchResult ? matchResult[1] : phoneInput.value;
  }
  // 填充新的区号+用户之前输入的内容
  if (countryCode) {
    phoneInput.value = `${countryCode} ${userPhoneNumber}`;
  } else {
    phoneInput.value = userPhoneNumber;
  }
});

// 监听手机号输入，实时更新存储的用户手机号本体
phoneInput.addEventListener('input', function() {
  const matchResult = this.value.match(/^\+\d+\s?(.*)$/);
  userPhoneNumber = matchResult ? matchResult[1] : this.value;
});

补充说明 #

• 提交表单时如果要做合法性校验，服务端可以直接维护一份静态的国家-区号映射表，不用存库，直接用静态映射校验提交的国籍和区号是否匹配即可
• 数据存储建议把国家、国家区号、用户手机号本体分开三个字段存，后续业务需要拆分使用时更灵活，如果不需要额外拆分也可以直接把完整带区号的手机号存为一个字段

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