效果图

前端代码

{% extends 'base.html' %}
{% block title %} 用户注册 {% endblock %}
{% block content %}
  <div class="layui-row">
    <div class="layui-col-md6">
      <div class="layui-card">
          <div class="layui-card-body">
            <form class="layui-form" action="" onsubmit="return false">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="user" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名字</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入名字" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                  <input type="radio" name="sex" value="男" title="男">
                  <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="text" name="role" required  lay-verify="required" placeholder="请输入角色" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                  <textarea name="lable" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
            </div>
        </form>
          </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block js %}
    <script>
        layui.use(['form','layer'], function(){   //导入模块
          var form = layui.form;
          var $ = layui.jquery;
          var layer = layui.layer;

          //监听提交
          form.on('submit(formDemo)', function(data){
            $.ajax({
                type: "POST",
                url: "{% url 'register_user' %}",
                data: data.field,
                success: function (result) {
                    if (result.code == "0") {
                        layer.msg(result.msg, {icon: 6})
                    } else {
                        layer.msg(result.msg, {icon: 5})
                    }
                }
            })
          });
        });
    </script>
{% endblock %}

后端代码

# 注册用户
@self_login_required
def register_user(request):
    if request.method == "GET":
        return render(request, "register_user.html")
    elif request.method == "POST":
        # 从数据库获取所有用户名
        user_list = []  # 用户名列表
        for users in User.objects.all():
            user_list.append(users.user)

        # 判断数据库是否有该用户
        user = request.POST.get("user", None)
        if user in user_list:
            code = 1
            msg = f"{user}用户已存在"
            result = {"code": code, "msg": msg}
            return JsonResponse(result)
        password = request.POST.get("password", None)
        name = request.POST.get("name", None)
        sex = request.POST.get("sex", None)
        age = request.POST.get("age", None)
        role = request.POST.get("role", None)
        label = request.POST.get("label", None)
        try:
            User.objects.create(
                user=user,password=password,name=name,sex=sex,age=age,role=role,label=label
            )
            code = 0
            msg = f"{user}用户注册成功"
        except Exception as e:
            print(e)
            code = 1
            msg = "注册失败"
        print(msg)
        result = {"code":code, "msg": msg}
        return JsonResponse(result)