效果图

前端代码

{% 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 = 1msg = 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 = 0msg = f"{user}用户注册成功"except Exception as e:print(e)code = 1msg = "注册失败"print(msg)result = {"code":code, "msg": msg}return JsonResponse(result)

layui表单—用户注册界面相关推荐

layui表单提交使用form.on(‘submit(sub)‘,function (){}) 使用ajax请求时回调不执行的原因及解决方法
layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法参考文章: (1)layui表单提交使用form.on(' ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
layui表单验证内置自定义规则 - 使用说明
关于 layui表单的验证规则.调用.自定义规则的使用经验总结: 除了 layui 本身配套的一个验证体系,还支持开发者自定义验证规则(如上表中的[自定义密码验证(代码参考下文)]),并直接嵌入到页面 ...
Layui表单复选框验证
Layui表单复选框验证近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提 ...
Layui表单验证失效解决办法
出现layui表单提交时没有进行验证的情况解决办法 <div class="layui-input-inline" style="width: 150px;&quo ...
【解决】LayUI表单验证，提交按钮在弹出层，lay-verify失效的情况
layui的表单是我特别常用的一个功能,这次在写添加和修改界面时,也顺手将layui的表单界面放进去,想着等会利用layui自带的表单验证功能将用户输入的值进行一一验证,没想到遇到了如题目所描述的情况 ...
layui表单验证方式大全
表单自带校验 lay‐verify:是表单验证的关键字 required (必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity ...
00008 - layui 表单验证，需要验证，但非必输
当使用layui的验证规则,比如手机, <input type="text" name="userName" lay-verify="phon ...
layui表单动态CURD功能
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.手残党的搬砖添瓦二.使用步骤 1.引入CSS,JS样式 2.CURD实操总结前言时间:2022-11-15 ...
layui表单单选按钮和下拉框默认选中
单选按钮和下拉框默认选中在使用layui的单选按钮和下拉框时,有时候需要将后台传过来的值使得单选框和下拉菜单默认选中.我的方法是将后台穿过来的值先放在一个隐藏域中,然后再去取值. 1.HTML片 ...

layui表单—用户注册界面

效果图

前端代码

后端代码

layui表单—用户注册界面相关推荐

最新文章

热门文章