如何为Django Phonenumber Widget添加国家国旗整合单输入框

不需要修改django-phonenumber-field核心源码，搭配成熟前端输入组件即可实现目标效果，具体步骤如下：

1. 准备前端依赖 #

使用intl-tel-input作为前端手机号输入组件，该组件原生支持国家国旗展示、区号下拉选择、手机号格式校验，输出的E.164标准格式号码可以直接被django-phonenumber-field识别存储。

• 若用npm管理前端依赖，直接执行安装命令：
  npm install intl-tel-input
• 传统Django模板项目可以把组件的CSS、JS、国旗雪碧图资源放到项目静态目录下引入即可，不需要额外安装后端依赖。

2. 调整Django表单逻辑 #

移除当前拆分的独立区号选择字段，直接使用PhoneNumberField作为单一字段，给输入框添加专属类名方便前端初始化绑定：

from django import forms
from phonenumber_field.formfields import PhoneNumberField

class UserContactForm(forms.Form):
    phone = PhoneNumberField(
        label="手机号",
        widget=forms.TextInput(attrs={
            "class": "intl-phone-input",
            "placeholder": "请输入手机号"
        })
    )

之前搭配Babel实现的国家名称本地化能力可以完全保留，不需要改动现有后端配置。

3. 前端初始化组件对接字段 #

在对应模板页面引入组件资源后，编写初始化逻辑绑定到手机号输入框：

document.addEventListener('DOMContentLoaded', () => {
    const phoneInput = document.querySelector('.intl-phone-input');
    // 初始化手机号输入组件
    const iti = window.intlTelInput(phoneInput, {
        // 默认选中中国，可根据后端传入的用户属地信息动态替换
        initialCountry: 'cn',
        // 开启国旗展示、区号与输入框分离显示，和预期效果一致
        showFlags: true,
        separateDialCode: true,
        // 加载工具函数实现号码格式校验，路径替换为自身项目的静态资源地址
        utilsScript: '/static/intl-tel-input/utils.js'
    });

    // 表单提交前自动拼接区号和输入内容，转为后端可识别的标准号码格式
    phoneInput.closest('form').addEventListener('submit', () => {
        phoneInput.value = iti.getNumber();
    });
})

初始化完成后，原来拆分的两个字段会被整合成单一输入行：左侧是带国旗的区号下拉按钮，右侧是手机号输入框，整体占用宽度比两个独立字段缩小40%左右，完全匹配预期效果。

4. 可选自定义调整 #

• 若需要保留多语言国家名称，可以把Babel输出的国家名映射传入组件的i18n配置项，替换默认英文国名
• 可以通过覆盖组件CSS调整输入框高度、下拉菜单样式，和项目整体UI风格对齐
• 组件自带手机号格式校验能力，可以直接在前端提示用户输入的号码格式错误，减少后端校验压力

当前实现效果：

预期实现效果：

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