Django多步骤注册表单submit类型按钮无法提交数据问题求助

多步表单提交失败的错误点及修复方案 #

1. 视图层拼写错误（直接导致请求失败） #

views.py中获取手机号的代码存在拼写错误，将request.POST误写为request.PSOT，会直接触发服务端500错误：

# 错误写法
phone_no = request.PSOT['phone']
# 修正为
phone_no = request.POST['phone']

2. 前端输入校验规则冲突 #

年龄输入框的属性逻辑完全矛盾：maxlength="2"限制最多输入2位数字，pattern="[0-9]{10}"要求必须输入10位数字，浏览器自带的表单校验会直接拦截提交，无任何报错提示：

<!-- 错误写法 -->
<input class="register-form-control" type="tel" id="age" name="age" maxlength="2" pattern="[0-9]{10}" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="age"  required />
<!-- 修正年龄的校验规则 -->
<input class="register-form-control" type="tel" id="age" name="age" maxlength="2" pattern="[0-9]{1,2}" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="age"  required />

3. 提交按钮JS逻辑缺失 #

你给submit类型按钮绑定了自定义点击事件，但没有手动触发表单提交逻辑，建议补充代码：

submitBtn.addEventListener("click", function(){
    bullet[current - 1].classList.add("active");
    progressText[current - 1].classList.add("active");
    progressCheck[current - 1].classList.add("active");
    current+=1;
    // 补充手动提交表单逻辑，也可在此处增加密码一致性、选项必填校验
    document.querySelector('form').submit();
});

4. 视图层缺异常分支处理 #

当前代码未处理密码不一致、必填项未传等异常情况，出现异常时页面会直接空白无响应，建议补充错误逻辑：

def registerpage(request):
    if request.method == 'POST':
        try:
            full_name = request.POST['full_name']
            age = request.POST['age']
            phone_no = request.POST['phone']
            address = request.POST['address']
            plan = request.POST['plan']
            email = request.POST['email']
            password1= request.POST['password']
            password2= request.POST['con_password']

            if password1==password2:
                user=CustomUser.objects.create_user(full_name=full_name,age=age, phone_no=phone_no, address=address, plan=plan, email=email, password=password1)
                user.save()
                return redirect('/')
            else:
                # 密码不一致返回错误提示
                return render(request, 'register.html', {"error":"两次输入的密码不匹配"})
        except Exception as e:
            # 其他异常捕获
            return render(request, 'register.html', {"error":"提交信息有误，请检查后重试"})
    else:
        return render(request, 'register.html')

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