如何在Django中无需页面渲染验证手机号并保留表单输入数据？

1. 后端表单验证+提交后保留输入数据 #

首先通过Django表单类实现手机号的长度与格式验证，同时确保验证失败时用户输入的内容不会丢失。

编写表单类 #

在forms.py中定义注册表单，复用Django内置的表单验证机制，通过clean_phone_number方法自定义手机号规则：

from django import forms

class RegistrationForm(forms.Form):
    phone_number = forms.CharField(label='手机号', max_length=10, min_length=10)
    username = forms.CharField(label='用户名')
    password = forms.CharField(label='密码', widget=forms.PasswordInput)

    def clean_phone_number(self):
        phone = self.cleaned_data.get('phone_number')
        # 验证是否为纯数字
        if not phone.isdigit():
            raise forms.ValidationError('手机号必须为数字')
        # 验证长度是否为10位
        if len(phone) != 10:
            raise forms.ValidationError('手机号必须为10位数字')
        return phone

视图层处理逻辑 #

在views.py中，POST请求时用request.POST实例化表单，验证失败时将带用户输入数据的表单对象返回给模板：

from django.shortcuts import render
from .forms import RegistrationForm

def register(request):
    if request.method == 'POST':
        form = RegistrationForm(request.POST)
        if form.is_valid():
            # 此处编写注册逻辑（如保存用户到数据库）
            return redirect('register_success')
    else:
        form = RegistrationForm()
    # 无论验证成功/失败，都将form传入模板
    return render(request, 'register.html', {'form': form})

模板渲染表单 #

模板中直接使用Django表单字段渲染，验证失败时表单会自动填充用户之前输入的内容：

<!-- register.html -->
<form method="post">
    {% csrf_token %}
    <div class="form-group">
        {{ form.phone_number.label_tag }}
        {{ form.phone_number }}
        {% if form.phone_number.errors %}
            <div class="error-text">{{ form.phone_number.errors.0 }}</div>
        {% endif %}
    </div>
    <div class="form-group">
        {{ form.username.label_tag }}
        {{ form.username }}
        {% if form.username.errors %}
            <div class="error-text">{{ form.username.errors.0 }}</div>
        {% endif %}
    </div>
    <div class="form-group">
        {{ form.password.label_tag }}
        {{ form.password }}
        {% if form.password.errors %}
            <div class="error-text">{{ form.password.errors.0 }}</div>
        {% endif %}
    </div>
    <button type="submit">提交注册</button>
</form>

2. 无刷新验证手机号（不触发页面渲染） #

如果需要实现不刷新页面的实时验证，通过AJAX请求后端接口完成校验，避免页面刷新导致数据丢失。

后端新增验证接口 #

在views.py中添加专门的手机号验证视图：

from django.http import JsonResponse

def validate_phone(request):
    if request.method == 'POST':
        phone = request.POST.get('phone_number')
        # 复用表单的验证逻辑
        form = RegistrationForm({'phone_number': phone})
        if form.is_valid():
            return JsonResponse({'valid': True})
        else:
            return JsonResponse({'valid': False, 'error': form.errors['phone_number'][0]})
    return JsonResponse({'valid': False})

在urls.py中添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    path('register/', views.register, name='register'),
    path('validate-phone/', views.validate_phone, name='validate_phone'),
]

前端AJAX实现实时验证 #

在模板中添加JavaScript代码，监听手机号输入框的blur事件，发送异步请求验证：

<!-- register.html -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const phoneInput = document.getElementById('id_phone_number');
    let errorElement = phoneInput.nextElementSibling;

    phoneInput.addEventListener('blur', function() {
        const phoneValue = this.value.trim();
        if (!phoneValue) return;

        fetch('{% url "validate_phone" %}', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `phone_number=${encodeURIComponent(phoneValue)}`
        })
        .then(res => res.json())
        .then(data => {
            if (data.valid) {
                if (errorElement && errorElement.classList.contains('error-text')) {
                    errorElement.textContent = '';
                }
            } else {
                if (!errorElement || !errorElement.classList.contains('error-text')) {
                    errorElement = document.createElement('div');
                    errorElement.className = 'error-text';
                    phoneInput.parentNode.appendChild(errorElement);
                }
                errorElement.textContent = data.error;
            }
        });
    });
});
</script>

核心注意事项 #

• 后端必须用request.POST实例化表单，这样验证失败时表单会自动保存用户输入的数据，模板渲染时自动填充。
• 不要手动编写input的value属性，依赖Django表单字段渲染即可自动处理数据回填。
• 无刷新验证通过AJAX实现，避免页面刷新，从根源上解决数据丢失问题。

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