Django注册表单集成intl-tel-input后手机号无法保存的解决方法

1. 修正手机号输入框的名称匹配问题 #

模板中手机号输入框的name属性是phone，但表单定义的字段是phone_number，Django表单无法识别到对应字段的值，因此会提示必填错误。修改模板中的输入框：

<div class="input-box">
  <span class="details">Phone number</span>
  <input id="phone" type="tel" name="phone_number" />
</div>

2. 确保提交时传递格式化后的手机号 #

intl-tel-input插件不会自动将格式化后的号码同步到原输入框，需要在表单提交前手动赋值，替换原脚本内容：

const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
  onlyCountries: ['ug'],
  utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});

// 监听表单提交事件
document.querySelector('form').addEventListener('submit', function() {
  // 将插件处理后的E.164格式号码赋值给输入框
  phoneInputField.value = phoneInput.getNumber();
});

3. 修复模板的HTML结构错误 #

你的模板存在重复的<head>和<body>标签，会导致浏览器解析异常、脚本加载失败，删除重复部分，保持正确结构：

{% load static %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/css/register.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<body>
  <div class="container">
    <!-- 表单内容 -->
  </div>
  <script>
    // 脚本内容
  </script>
</body>
</html>

4. 规范表单字段与文件上传逻辑 #

• 在forms.py中显式定义phone_number字段（可选但更符合Django规范）：

class RegForm(UserCreationForm):
    # 其他字段...
    phone_number = forms.CharField(widget=forms.TextInput(attrs={'id': 'phone', 'placeholder': 'Enter phone number'}))
    # 移除LC1_letter字段widget的name属性，避免字段不匹配
    LC1_letter = forms.FileField(widget=forms.FileInput())
    # 其他代码...

• 在views.py中通过表单的cleaned_data获取文件，避免直接操作request.FILES：

if form.is_valid():
    lc1_file = form.cleaned_data['LC1_letter']
    fss = FileSystemStorage()
    file = fss.save(lc1_file.name, lc1_file)
    file_url = fss.url(file)
    form.save()

内容的提问来源于stack exchange，提问作者Isalanya Mwase Sam