Django表单如何实现选择用户类型后动态展示对应注册字段

1. 调整表单定义 #

首先在原有用户类型选择字段基础上，补充两类用户的专属字段，给下拉选择框加固定id方便前端绑定事件，专属字段先设置为非必填，避免非对应用户提交时触发默认校验拦截。

from django import forms

USER_TYPE_CHOICES = (
    ('', '----'),
    ('doctor', '医生'),
    ('patient', '患者'),
)

class RegisterForm(forms.Form):
    usertype = forms.ChoiceField(
        initial='----',
        choices=USER_TYPE_CHOICES,
        widget=forms.Select(attrs={
            'class': 'form-control',
            'id': 'usertype-select'
        })
    )
    # 医生专属字段
    doctor_license_no = forms.CharField(
        label='医师执业编号',
        required=False,
        widget=forms.TextInput(attrs={'class': 'form-control'})
    )
    # 患者专属字段
    patient_medical_history = forms.CharField(
        label='既往病史',
        required=False,
        widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 3})
    )

    def clean(self):
        cleaned_data = super().clean()
        usertype = cleaned_data.get('usertype')
        # 后端二次校验，避免前端篡改绕过规则
        if usertype == 'doctor':
            if not cleaned_data.get('doctor_license_no'):
                self.add_error('doctor_license_no', '请输入医师执业编号')
        elif usertype == 'patient':
            if not cleaned_data.get('patient_medical_history'):
                self.add_error('patient_medical_history', '请填写既往病史信息')
        return cleaned_data

2. 修改模板渲染结构 #

把两类专属字段包裹在带独立类名的容器中，默认设置为隐藏状态，保留原有栅格类不影响样式。

<!-- 原有用户类型选择模块 -->
<div class="row">
  <div class="col-md-3 px-md-1">
    <div class="form-group">
      <label>User type</label>
      {{form.usertype}}
    </div>
  </div>
</div>

<!-- 医生专属字段模块 默认隐藏 -->
<div class="row user-type-fields doctor-fields" style="display: none;">
  <div class="col-md-6 px-md-1">
    <div class="form-group">
      <label>医师执业编号</label>
      {{form.doctor_license_no}}
    </div>
  </div>
</div>

<!-- 患者专属字段模块 默认隐藏 -->
<div class="row user-type-fields patient-fields" style="display: none;">
  <div class="col-md-12 px-md-1">
    <div class="form-group">
      <label>既往病史</label>
      {{form.patient_medical_history}}
    </div>
  </div>
</div>

3. 添加前端交互逻辑 #

在模板底部加原生JS即可实现切换效果，不需要额外引入第三方库，同时兼容表单校验失败返回时的状态回填。

<script>
document.addEventListener('DOMContentLoaded', function() {
  const usertypeSelect = document.getElementById('usertype-select');
  const allFieldBlocks = document.querySelectorAll('.user-type-fields');

  // 初始化时执行一次，适配表单提交失败回填场景
  switchFieldBlock();
  usertypeSelect.addEventListener('change', switchFieldBlock);

  function switchFieldBlock() {
    const selected = usertypeSelect.value;
    // 先隐藏所有专属字段块
    allFieldBlocks.forEach(block => block.style.display = 'none');
    // 选中有效用户类型时展示对应块
    if (selected) {
      const targetBlock = document.querySelector(`.${selected}-fields`);
      // 用flex适配Bootstrap的row布局，避免栅格错乱
      if (targetBlock) targetBlock.style.display = 'flex';
    }
  }
})
</script>

提示：如果没有使用Bootstrap框架，把显示时的display: flex改成display: block即可；如果后续要加更多用户类型，只需要在选项里加对应值、加对应带{类型}-fields类名的字段块即可，不需要修改JS逻辑。

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