layui表单+显示和隐藏密码

 <div class="layui-form-item">
                                    
                                    <div class="layui-inline">
                                        <label class="layui-form-label">密 码</label>
                                        <div class="layui-input-inline" >

                                            <input type="password" name="password" id="password" required lay-verify="required||password" placeholder="请输入密码" autocomplete="off" class="layui-input" th:value="${session.userinfo.password}" >

                                        </div>
                                        <!--<div class="layui-form-mid">-</div>-->
                                        <div class="layui-input-inline" style="width: 20px;margin-top:10px ">
                                            <a href="javascript:void(0);" id="show" style="text-decoration:none;"><i class="iconfont iconyanjing_bi" id="iconyanjing_bi" ></i></a>
                                        </div>

                                    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script th:src="@{/bootstrap3/js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript">
    $("#show").on("click", ".iconyanjing_bi", function () {
        $(this).removeClass("iconyanjing_bi").addClass("iconyanjing");
        $("#password").attr("type", "text");
    });

    $("#show").on("click", ".iconyanjing", function () {
        $(this).removeClass("iconyanjing").addClass("iconyanjing_bi");
        $("#password").attr("type", "password");
    });

</script>

关键在于layui组装行内表单排版

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Django中使用LayUI和MySQL来实现表单的添加功能,你可以按照以下步骤进行操作: 1. 定义模型:首先,在Django的模型文件(`models.py`)中定义你的数据模型,然后运行迁移命令将模型映射到数据库中。例如,创建一个简单的学生模型: ```python from django.db import models class Student(models.Model): name = models.CharField(max_length=100) age = models.IntegerField() ``` 2. 创建表单类:在Django的表单文件(`forms.py`)中,创建一个表单类来处理学生信息的输入。例如: ```python from django import forms from .models import Student class StudentForm(forms.ModelForm): class Meta: model = Student fields = ['name', 'age'] ``` 3. 编写视图函数:在视图文件(`views.py`)中编写一个视图函数来处理表单的添加操作。例如: ```python from django.shortcuts import render, redirect from .forms import StudentForm def student_create(request): if request.method == 'POST': form = StudentForm(request.POST) if form.is_valid(): form.save() return redirect('student_list') else: form = StudentForm() return render(request, 'student_form.html', {'form': form}) ``` 在这个视图函数中,我们根据请求的方法(GET或POST)来处理表单的展示和提交。如果是POST请求,我们将根据表单数据创建一个新的学生对象并保存到数据库中,然后重定向到学生列表页面;如果是GET请求,我们将展示一个空的表单供用户填写。 4. 创建模板文件:在模板文件中(`student_form.html`),使用LayUI表单组件来展示学生信息的输入框和提交按钮。例如: ```html {% extends 'base.html' %} {% block content %} <form class="layui-form" method="post" action="{% url 'student_create' %}"> {% csrf_token %} <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> {{ form.name }} </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年龄</label> <div class="layui-input-block"> {{ form.age }} </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submit">提交</button> </div> </div> </form> {% endblock %} ``` 在这个模板中,我们使用Django的模板语法来渲染表单字段,并使用LayUI的样式和组件来美化表单的展示。 5. 配置URL映射:在URL配置文件(`urls.py`)中,将URL映射到视图函数。例如: ```python from django.urls import path from .views import student_create urlpatterns = [ path('students/create/', student_create, name='student_create'), ] ``` 这样,当访问`http://localhost:8000/students/create/`时,你将会看到一个使用LayUI展示的学生添加表单。 请确保已经正确加载LayUI的CSS和JS文件,以及引入了必要的LayUI样式和组件。如果你还没有引入LayUI的文件,请按照之前提到的步骤将LayUI的文件下载并放置在Django项目的静态文件目录中。 希望以上步骤能帮助你在Django中使用LayUI和MySQL来实现表单的添加功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值