layui框架实战案例(27):弹出二次验证

news2024/11/17 23:33:34

在这里插入图片描述

HTML容器

 <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>批量删除</button>

删除封装函数

    function delAll(school_id, school_name) {
        var lock = false;
        layer.confirm('确认要删除吗?', function (index) {
            if (!lock) {
                lock = true;
                $.ajax({
                    type: "post",
                    url: "?m=School&a=schoolDeal&act=del",
                    async: true,
                    data: {
                        school_id: school_id,
                        school_name: school_name
                    },
                    dataType: "text",
                    success: function (data) {
                        layer.msg(data + '删除成功', {icon: 1, time: 1000}, function () {
                            location.replace(location.href);
                        });
                    }
                });
            }
        });
    }

二次验证

 //二次验证
        function Validation (school_id, school_name) {
            if(school_id.length == 0){
                layer.msg('请选择要删除的数据!');
                return false;
            }
            //验证逻辑
            var num1 = Math.floor(Math.random() * 10) + 1;
            var num2 = Math.floor(Math.random() * 10) + 1;
            var correctAnswer = num1 + num2;
            layer.open({
                type: 1,
                area: '350px',
                resize: false,
                //shadeClose: true,
                title: '删除信息验证',
                content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
            <div class="demo-login-container">
             <div class="layui-card-header layui-font-red layui-font-20" style="margin-top: -16px;text-align: center;">警告</div>
           <div class="layui-card-body layui-font-red layui-font-16">删除学校基础信息,将同步删除系统相关联的数据表信息!</div>
              <div class="layui-form-item">
              <label class="layui-form-label" style="width: 30%;">验证 ${num1} + ${num2} = </label>
                <div class="layui-input-inline" style="width: 40%;">
                  <input type="number" name="userAnswer" lay-verify="required" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid layui-bg-red" lay-submit lay-filter="demo-login">确定删除</button>
              </div>
            </div>
          </div> `,
                success: function () {
                    form.render();// 对弹层中的表单进行初始化渲染

                    // 表单提交事件
                    form.on('submit(demo-login)', function (data) {
                        var field = data.field;
                        //console.log(field.userAnswer);
                        if (field.userAnswer == correctAnswer) {
                            delAll(school_id, school_name);//执行删除操作
                        } else {
                            layer.alert('结果不正确,请重新验证!', {icon: 2, time: 1000});
                        }
                        return false;
                    });
                }
            });
        }

触发事件

        //触发事件
        table.on('toolbar(lockTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'delete':
                    var data = checkStatus.data;
                    var school_id = [], school_name = [];
                    for (var i = 0; i < data.length; i++) {
                        school_id.push(data[i].school_id)
                        school_name.push(data[i].school_name)
                    }
                    //二次验证
                    Validation (school_id, school_name);
                    //delAll(school_id, school_name);
                    break;
                case 'add':
                    getPopUrl('添加数据', '?m=School&a=schoolAdd', '', '','');
                    break;
            }
        });

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1610687.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

牛x之路 - Day1

Day1 微积分之屠龙宝刀&#xff08;武林秘籍&#xff09; 之前的一些东西都在pdf上记得笔记&#xff0c; 没有在这个上面展示一遍&#xff0c;只好学到相关内容的时候再提叙啦&#xff1b;所以其实再写这个小记的时候&#xff0c;我已经看了一半的书&#xff0c;但是不要紧&am…

每日学习笔记:C++ STL算法之移除容器元素

本文API 移除元素 remove(beg, end, value) remove_if(beg, end, op) remove_copy(sourceBeg, sourceEnd, destBeg, value) remove_copy_if(sourceBeg, sourceEnd, destBeg, op) 移除连续重复的元素 unique(beg, end) unique(beg, end, op) unique_copy(sourceBeg, sourceEnd, …

Ribbon 添加快速访问区域

添加快速访问区域挺简单的&#xff0c;实例如下所示&#xff1a; void QtRightFuncDemo::createQuickAccessBar() { RibbonQuickAccessBar* quickAccessBar ribbonBar()->quickAccessBar(); QAction* action quickAccessBar->actionCustomizeButton(); act…

单链表的简单应用

目录 一、顺序表的问题及思考 二、链表的概念及结构 三、单链表的实现 3.1 增 3.1.1 尾插 3.1.2 头插 3.1.3 指定位置前插入 3.1.4 指定位置后插入 3.2 删 3.2.1 尾删 3.2.2 头删 3.2.3 指定位置删除 3.2.4 指定位置后删除 3.2.5 链表的销毁 3.3 查 3.4 改 四…

Python爬虫使用需要注意什么?应用前景如何?

Python爬虫很多人都听说过&#xff0c;它是一种用于从网页上获取信息的程序&#xff0c;它可以自动浏览网页、提取数据并进行处理。技术在使用Python爬虫时需要注意一些重要的事项&#xff0c;同时本文也会跟大家介绍一下爬虫的应用前景。 第一个注意事项就是使用Python爬虫时…

HCIP-OSPF综合实验

一实验拓扑图 二.实验要求 1、R4为ISP&#xff0c;其上只配置IP地址&#xff1b;R4与其他所直连设备间均使用公有IP&#xff1b; 2、R3-R5、R6、R7为MGRE环境&#xff0c;R3为中心站点&#xff1b; 3、整个OSPF环境IP基于172.16.0.0/16划分&#xff1b;除了R12有两个环回&…

【JavaEE多线程】线程安全、锁机制及线程间通信

目录 线程安全线程安全问题的原因 synchronized 关键字-监视器锁monitor locksynchronized的特性互斥刷新内存可重入 synchronized使用范例 volatilevolatile能保证内存可见性volatile不保证原子性synchronized 也能保证内存可见性 wait 和 notifywait()方法notify()方法notify…

【CBB系列】EtherCAT硬件技术总结及其从站硬件设计

EtherCAT硬件技术总结及其从站硬件设计 EtherCAT硬件技术简介基于LAN9252的EtherCAT从站硬件设计LAN9252总览电源、时钟与复位主机总线(PDI/SPI)与MIII2C接口与硬配置引脚LED控制器与PORT总结作者按:最近在《硬件十万个为什么-开发流程篇》中看到了共用基础模块(Common bui…

最前沿・量子退火建模方法(2) : Domain wall encoding讲解和python实现

前言 上篇讲的subQUBO属于方法论&#xff0c;这次讲个通过编码量子比特的方式&#xff0c;同样的约束条件&#xff0c;不同的编码&#xff0c;所需的量子比特数是不同的。有的编码方式&#xff0c;很节省量子比特。比如&#xff0c;这次要讲的Domain wall encoding。 一、Doma…

利用AQS(AbstractQueuedSynchronizer)实现一个线程同步器

目录 1. 前言 2. 什么是同步器 3. 同步器实现思路 Semaphore(信号量) 4. 代码实现 4.1. 创建互斥锁类 4.2 编写静态内部类&#xff0c;继承AQS 4.3 内部类实现AQS钩子函数 4.3 封装lock&#xff0c;unlock方法 4.4. 测试 5. 总结 本文章源码仓库&#xff1a;Conc…

ros仿真启动小龟

1.启动RosMaster&#xff08;管理Ros中各个节点的“大管家”&#xff0c;每次启动Ros时需要首先启动RosMaster&#xff09; roscorefangfang-inspiron-5580:~/ros2/download/rosdistro$ roscore ... logging to /home/fang/.ros/log/6ec2d790-fe1d-11ee-aba8-1c1bb5cdec7c/ros…

基于SSM+Jsp+Mysql的电子商城系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

JAVA在线代码生成器 | 2024.04.20| 修复CDN问题+推出JDK8/11分支+修复大写下划线转驼峰问题

Description 项目介绍 Based on SpringBoot2Freemarker #基于SpringBoot2和Freemarker的代码生成平台 For reducing the repetitive CRUD work #以解放双手为目的&#xff0c;减少大量的重复CRUD工作 Support mysql, oracle and pgsql #支持MySQL、Oracle、PgSQL三大主流数据库…

解决Error in writing header file of the driver

在源代码里面更新了一批常规的内容&#xff0c;编译的时候遇到一个error&#xff0c;一大片都是红的。XXX是项目名称。 Description Resource Path Location Type Generator: ERROR: Error in writing header file of the driver XXX Cpu Processor Expert Problem 表面意思是…

docker灵活部署mysql

博客简要 用docker部署mysql,并将数据库映射到主机上&#xff0c;并增加远端访问mysql数据库 当你使用Docker运行MySQL时&#xff0c;并且希望将MySQL数据库的数据存储在宿主机&#xff08;也就是运行Docker的主机&#xff09;上的特定路径&#xff0c;你需要在启动容器时通过…

现代农业AI智能化升级之路:机器学习在现代农业领域的现状与未来发展

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

ppt技巧:​如何将两个PPT幻灯片文件合并成一个?

第一种方式&#xff1a;复制粘贴幻灯片 1. 打开第一个PPT幻灯片文件&#xff0c;确保你已经熟悉该文件的内容和布局。 2. 打开第二个PPT幻灯片文件&#xff0c;浏览其中的所有幻灯片&#xff0c;选择你想要合并到第一个文件中的幻灯片。 3. 使用快捷键CtrlC&#xff08;Wind…

python_列表和元组

介绍 列表&#xff08;List&#xff09;和元组&#xff08;Tuple&#xff09;是Python中两种不同的数据结构&#xff0c;它们都可以用来存储一系列的元素。下面是它们的主要特点和区别&#xff1a; 列表&#xff08;List&#xff09; 可变性&#xff1a;列表是可变的&…

Redis:报错Creating Server TCP listening socket *:6379: bind: No error

错误&#xff1a; window下启动redis服务报错&#xff1a; Creating Server TCP listening socket *:6379: bind: No error 原因&#xff1a; 端口6379已被绑定&#xff0c;应该是因为上次未关闭服务 解决&#xff1a; ①依次输入命令&#xff1a; redis-cli.exe &#xff08…

SpringBoot基于JavaWeb的菜鸟驿站快递管理系统ssm

前端&#xff1a;vue.jsElementUI 编程语言: java 框架&#xff1a; ssm/springboot 详细技术&#xff1a;springboot springbootvueMYSQLMAVEN 数据库: mysql5.7 数据库工具&#xff1a;Navicat/SQLyog都可以 ide工具&#xff1a;IDEA 或者eclipse 对菜鸟驿站快递管理系统设计…