Чтобы создать виджет номера телефона для форм Django, вы можете использовать различные подходы. Вот несколько методов с примерами кода:

Метод 1: использование поля регулярного выражения

from django import forms
from django.core.validators import RegexValidator
phone_regex = RegexValidator(
    regex=r'^\+?1?\d{9,15}$',
    message="Phone number must be entered in the format: '+999999999'. Up to 15 digits allowed."
)
class PhoneNumberForm(forms.Form):
    phone_number = forms.CharField(validators=[phone_regex])

Этот метод использует средство проверки регулярных выражений для проверки формата номера телефона. Переменная phone_regexопределяет шаблон регулярного выражения для формата номера телефона, а форма PhoneNumberFormвключает CharFieldс phone_regexвалидатор.

Метод 2: использование сторонней библиотеки
Вы также можете использовать сторонние библиотеки для создания виджета номера телефона. Одной из популярных библиотек является django-phonenumber-field, которая предоставляет PhoneNumberField и PhoneNumberWidget.

Сначала установите библиотеку с помощью pip:

pip install django-phonenumber-field

Затем в вашей форме Django:

from django import forms
from phonenumber_field.formfields import PhoneNumberField
class PhoneNumberForm(forms.Form):
    phone_number = PhoneNumberField()

Этот метод использует PhoneNumberField, предоставленный django-phonenumber-field. Он автоматически проверяет и форматирует номера телефонов, а соответствующий PhoneNumberWidgetбудет использоваться для отображения поля формы.

Метод 3: пользовательский виджет с помощью JavaScript
Если вы хотите создать собственный виджет с помощью JavaScript, вы можете использовать библиотеку, например libphonenumber-js, для форматирования и проверки номера телефона.

Во-первых, включите в свой проект библиотеку libphonenumber-js(вы можете использовать менеджер пакетов, например npm или Yarn).

Затем в форме Django вы можете создать собственный виджет, включающий функции JavaScript:

from django import forms
from django.utils.safestring import mark_safe
class PhoneNumberWidget(forms.TextInput):
    class Media:
        js = ['path/to/libphonenumber-js.js', 'path/to/phone_number_widget.js']
    def render(self, name, value, attrs=None, renderer=None):
        rendered_widget = super().render(name, value, attrs, renderer)
        return mark_safe(rendered_widget + '<script>initializePhoneNumberWidget("#id_%s");</script>' % name)
class PhoneNumberForm(forms.Form):
    phone_number = forms.CharField(widget=PhoneNumberWidget)

В этом методе создается подкласс PhoneNumberWidgetforms.TextInput, а класс Mediaиспользуется для включения необходимых файлов JavaScript.. Метод renderпереопределяется для добавления кода JavaScript, который инициализирует виджет номера телефона.