当前位置：首页 > news >正文

Layui——隐藏表单项后不再进行验证

news 2026/2/10 5:58:17

修改后的部分代码

修改后的完整代码

我编辑用户信息和添加新用户用的是同一个表单，不同的是编辑用户信息里没有密码项和确认密码项，但是把它们隐藏后仍然要进行验证，也就是说它们俩的验证并没有随着表单项的隐藏而关闭。
原因：关闭不彻底，一共有两步。隐藏表单项的同时，需要把表单项里的 lay-verify 属性改为空

修改后的部分代码

修改后的完整代码

<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<%@ include file="../common/taglibs.jsp" %><html lang="zh">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><%@ include file="../common/meta.jsp" %>
</head>
<body>
<div class="layui-btn-group layui-row" id="btn_group"><button type="button" class="layui-btn" data-method="addUser">添加账号</button>
</div>
<table class="layui-hide" id="userTable"></table>
</body>
<div hidden id="addUser"><form class="layui-form" action="" lay-filter="addUserForm" id="addUserForm"><div class="layui-form-item"><label class="layui-form-label">真实姓名</label><div class="layui-input-block"><input type="text" name="realname" required  lay-verify="required" autocomplete="off" class="layui-input"><input type="text" name="id" hidden></div></div><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="username" required  lay-verify="required" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"  lay-filter="userPaword" id="userPaword"><label class="layui-form-label">密码</label><div class="layui-input-block"><input type="password" name="paword" required  lay-verify="required" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item" lay-filter="confirmPaword" id="confirmPaword"><label class="layui-form-label">确认密码</label><div class="layui-input-block"><input type="password" lay-verify="required|confirmPass" autocomplete="off" placeholder="确认密码"  class="layui-input"></div></div><div><button type="button" data-method="addUser" lay-filter="formVerify" lay-submit style="display: none">提交新用户表单或修改后的用户表单</button></div></form>
</div>
<div hidden id="editPaword"><form class="layui-form" action="" lay-filter="editPawordForm" id="editPawordForm"><div class="layui-form-item"  lay-filter="paword"><label class="layui-form-label">密码</label><div class="layui-input-block"><input type="text" name="paword" required  lay-verify="required" autocomplete="off" class="layui-input"><input type="text" name="id" hidden></div></div><div class="layui-form-item" lay-filter="conformPaword"><label class="layui-form-label">确认密码</label><div class="layui-input-block"><input type="password"  lay-verify="required|confirmPass" autocomplete="off" placeholder="确认密码"  class="layui-input"></div></div><div><button type="button" data-method="editPaword" lay-filter="passwordVerify" lay-submit style="display: none">提交修改后的密码</button></div></form>
</div>
<script>layui.use(['table','layer','form','laydate'], function() {var table = layui.table;var layer = layui.layer;var $ = layui.$;var form = layui.form;var user={};form.verify({confirmPassword: function(value) {if($('input[name=paword]').val() !== value){return "两次输入的密码不一致!";}}});var userTable =  table.render({elem: '#userTable',url:'/user/list',method:"post",data: JSON.stringify(user)//传递json类型的参数,contentType: 'application/json',cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增,cols: [[{field:'username', width:200, title: '用户名', sort: true},{field:'realname', width:200, title: '真实姓名', sort: true},{field:'lastLogineTime', width:200, title: '上次登录时间', sort: true},{field:'createtime', width:200, title: '创建时间', sort: true},{width:300, title: '操作',templet:function(d){return '<button type="button" class="layui-btn layui-btn-sm singleBtn" data-method="editUser" data-id="'+d.id+'"><i class="layui-icon layui-icon-edit"/></button>'+'<button type="button" class="layui-btn layui-btn-sm singleBtn" data-method="editPaword" data-id="'+d.id+'"><i class="layui-icon layui-icon-key" /></button>'+'<button type="button" class="layui-btn layui-btn-sm singleBtn" data-method="deleteUser" data-id="'+d.id+'"><i class="layui-icon layui-icon-delete"/></button>'}}]],parseData: function(res){ //res 即为原始返回的数据return res},done: function(res, curr, count){//如果是异步请求数据方式，res即为你接口返回的信息。//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度console.log(res);//得到当前页码console.log(curr);//得到数据总量console.log(count);$('.singleBtn').on('click', function(){var othis = $(this), method = othis.data('method');active[method] ? active[method].call(this, othis) : '';});},page: true});function layerForm(){//多窗口模式，层叠置顶layer.open({type: 1, title: '添加账号', content: $('#addUser'), btn: ['保存', '取消'] //只是为了演示, area: ['600px', '300px'] //宽高,closeBtn: 0,success: function (layero, index) { // 弹出层打开后的回调函数layero.addClass('layui-form'); // 为弹出层添加 `layui-form` 类layero.find('.layui-layer-btn0').attr({ // 修改“保存”按钮的属性'lay-filter': 'formVerify', // 添加 lay-filter 属性，设置为 'formVerify''lay-submit': '' // 添加 lay-submit 属性，启用 layui 表单提交功能});form.render(); // 渲染表单}, yes: function () {form.on('submit(formVerify)', function (data) { // 绑定表单提交事件var formData = form.val('addUserForm');//form lay-filter属性console.log(formData);var layerui = layer;$.ajax({url: "/user/add",type: "POST",data: JSON.stringify(formData),//传递json类型的参数contentType: "application/json; charset=utf-8",dataType: "json",success: function (result) {if(result.code == COMMON_SUCCESS_CODE){layerui.msg('操作成功');userTable.reload()}else{layerui.alert('操作失败', {icon: 2});}layerui.closeAll();$("#addUserForm")[0].reset();form.render();}})})}, btn2: function () {layer.closeAll();$("#addUserForm")[0].reset();form.render();}});}//触发事件var active = {addUser: function () {var that = this;layerForm();},editUser:function(){var othis = $(this), dataId = othis.data('id');$("#userPaword").hide();$("#confirmPaword").hide();$('#userPaword input').attr('lay-verify', ''); // 添加lay-verify属性,进行表单验证$('#confirmPaword input').attr('lay-verify', '');$.ajax({url: "/user/search/"+dataId,type: "GET",contentType: "application/json; charset=utf-8",success: function (result) {if(result.code == COMMON_SUCCESS_CODE){var user = result.data;//给表单赋值form.val("addUserForm", {"username": user.username,"realname": user.realname,"id": user.id});layerForm();}else{layer.alert('数据获取失败', {icon: 2});}}});},editPaword: function () {var othis = $(this), dataId = othis.data('id');//多窗口模式，层叠置顶layer.open({type: 1, title: '修改密码', content: $('#editPaword'), btn: ['保存', '取消'] //只是为了演示, area: ['600px', '300px'] //宽高,closeBtn: 0,success: function (layero, index) { // 弹出层打开后的回调函数layero.addClass('layui-form'); // 为弹出层添加 `layui-form` 类layero.find('.layui-layer-btn0').attr({ // 修改“保存”按钮的属性'lay-filter': 'passwordVerify', // 添加 lay-filter 属性，设置为 'formVerify''lay-submit': '' // 添加 lay-submit 属性，启用 layui 表单提交功能});form.render(); // 渲染表单}, yes: function () {form.on('submit(passwordVerify)', function (data) { // 绑定表单提交事件var formData = form.val('editPawordForm');//form lay-filter属性console.log(formData);var layerui = layer;$.ajax({url: "/user/editPaword/"+dataId,type: "POST",data: JSON.stringify(formData),//传递json类型的参数contentType: "application/json; charset=utf-8",dataType: "json",success: function (result) {if(result.code == COMMON_SUCCESS_CODE){layerui.msg('操作成功');userTable.reload()}else{layerui.alert('操作失败', {icon: 2});}layerui.closeAll();$("#editPawordForm")[0].reset();form.render();}})})}, btn2: function () {layer.closeAll();$("#editPawordForm")[0].reset();form.render();}});},deleteUser: function(){var othis = $(this), dataId = othis.data('id');layer.confirm('确定删除？', {btn: ['确定', '取消'] //可以无限个按钮,yes: function(index, layero){var layDelete  = layer;$.ajax({url: "/user/delete/"+dataId,type: "DELETE",contentType: "application/json; charset=utf-8",success: function (result) {if(result.code == COMMON_SUCCESS_CODE){userTable.reload()}else{layer.alert('删除失败', {icon: 2});}layDelete.closeAll();}})}, btn2: function(index, layero){layer.closeAll();}});}}$('#btn_group .layui-btn').on('click', function(){var othis = $(this), method = othis.data('method');active[method] ? active[method].call(this, othis) : '';});})
</script>
</html>

Layui——隐藏表单项后不再进行验证

目录修改后的部分代码修改后的完整代码我编辑用户信息和添加新用户用的是同一个表单，不同的是编辑用户信息里没有密码项和确认密码项，但是把它们隐藏后仍然要进行验证，也就是说它们俩的验证并没有随着表单项的隐藏而关闭。原因&#xf…...

编程日记 2024/8/14 7:42:24

Github Copilot 使用技巧

🎯目标读者本文不包含如何安装 Github Copilot本文介绍了 Github Copilot 使用方法和一些技巧本人已经使用 Github Copilot 2 年了，交了 3 次年费，每年 100$ 着实心痛，但是用着确实爽歪歪但是感觉一直只用了一小部分功能&am…...

编程日记 2024/8/14 7:37:19

【实现100个unity特效之20】用unity实现物品悬浮和发光像素粒子特效

最终效果文章目录最终效果新增飞升粒子效果光圈效果修改不同颜色完结新增飞升粒子效果效果光圈效果效果修改不同颜色完结赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，你的每一次支持…...

编程日记 2024/8/14 7:36:18

GPT-4o mini发布，轻量级大模型如何颠覆AI的未来？

从巨无霸到小巨人：GPT-4o Mini的创新之路 ©作者|潇潇来源|神州问学引言随着人工智能技术的飞速进步，AI领域的竞争日益激烈，大型模型的发布几乎成为常态。然而，这些庞大的模型通常需要大量的计算资源和存储空间&#xff…...

编程日记 2024/8/14 7:33:15

高性能的 C++ Web 开发框架 CPPCMS + WebSocket 模拟实现聊天与文件传输案例。

1. 项目结构 2. config.json {"service": {"api": "http","port": 8080,"ip": "0.0.0.0"},"http": {"script": "","static": "/static"} }3. CMakeLists.txt…...

编程日记 2024/8/14 7:31:13

合合信息OCR支持30类国内常见票据一站式分类识别，支持医疗发票、数电票识别

合合信息TextIn平台明星产品——国内通用票据识别，重磅更新！ 产品支持票据类型扩展到23大类、30小类，覆盖场景更全面，同时升级优化了多款票据识别模型，平均识别率较前版本提升11.5%，整体识别速度提升21.9%…...

编程日记 2024/8/14 7:28:08

LeetCode-day40-3151. 特殊数组 I

LeetCode-day40-3151. 特殊数组 I 题目描述示例示例1：示例2：示例3： 思路代码题目描述如果数组的每一对相邻元素都是两个奇偶性不同的数字，则该数组被认为是一个特殊数组。 Aging 有一个整数数组 nums。如果 nums 是一个特殊…...

编程日记 2024/8/14 7:25:06

技术研究：Redis 数据结构与 I/O 模型

数据结构 Redis之所以“快”，一方面因为它是内存数据库，所有操作都在内存上完成，内存的访问速度本来就快。另一方面则是因为高效的数据结构，使得操作键值效率较高。总体来说，Redis使用了一个用来保存每个Key/Value的全…...

编程日记 2024/8/14 7:24:05

46-扇孔的处理及铺铜以及布线

1.先连信号线 2.电源管脚,以如下方式处理： 引线打孔处理...

编程日记 2024/8/14 7:23:04

LVS实验的三模式总结

文章目录 LVS的概念叙述NAT工作模式实战案例**思想：**NAT工作模式的优点NAT工作模式的缺点 NAT工作模式的应用场景大致配置 route：打开路由内核功能部署DR模式集群案例工作思想：大致工作图如下思路模型具体配置与事实步骤补充防火墙标签解…...

编程日记 2024/8/14 7:22:03

游戏安全入门-扫雷分析远程线程注入

前言无论学习什么，首先，我们应该有个目标，那么入门windows游戏安全，脑海中浮现出来的一个游戏 – 扫雷，一款家喻户晓的游戏，虽然已经被大家分析的不能再透了，但是我觉得自己去分析一下还是极好…...

编程日记 2024/8/14 7:21:01

bert-base-chinese模型的完整训练、推理和一些思考

前言使用google-bert/bert-base-chinese模型进行中文文本分类任务，使用THUCNews中文数据集进行训练，训练完成后，可以导出模型，进行预测。项目详细介绍和数据下载数据集下载地址 Github完整代码现记录训练过程中的一些感悟…...

编程日记 2024/8/14 7:18:59

JS基础5（JS的作用域和JS预解析）

JS的作用域 1. 全局作用域全局作用域是在代码的任何地方都能访问到的最外层作用域。在浏览器环境下，全局作用域就是window对象，因此所有在全局作用域中声明的变量和函数都会成为window对象的属性和方法。 var globalVar "I am global"; …...

编程日记 2024/8/14 7:17:58

Doris 夺命 30 连问！(中)

导言抱歉，作为从 S2 开始的骨灰级玩家看到 EDGUZI 官宣首发上线，兴奋之余忘了写文档 - -||，还望各位看官老爷见谅，这次错了，下次还敢 ^_^ 这是继上次的 30 问上篇的中篇，也是 10 个问题，有些…...

编程日记 2024/8/14 7:13:52

书生.浦江大模型实战训练营——（四）书生·浦语大模型全链路开源开放体系

最近在学习书生.浦江大模型实战训练营，所有课程都免费，以关卡的形式学习，也比较有意思，提供免费的算力实战，真的很不错（无广）！欢迎大家一起学习，打开LLM探索大门&#xf…...

编程日记 2024/8/14 7:12:51

SpringBoot 整合 RabbitMQ 实现延迟消息

一、业务场景说明用于解决用户下单以后，订单超时如何取消订单的问题。用户进行下单操作（会有锁定商品库存、使用优惠券、积分一系列的操作）；生成订单，获取订单的id；获取到设置的订单超时时间&#xff0…...

编程日记 2024/8/14 7:10:49

Cilium：基于开源 eBPF 的网络、安全性和可观察性

基于 eBPF 的网络、安全性和可观察性 Cilium 是一种开源的云原生解决方案，它利用 Linux 内核中的 eBPF 技术来提供、保护和监控工作负载之间的网络连接。什么是 eBPF？ eBPF 是一项源自 Linux 内核的技术，允许沙盒程序在特权上下文&#x…...

编程日记 2024/8/14 7:06:44

Axios 详解与使用指南

Axios 详解与使用指南 1. Axios 简介 Axios 是一个基于 Promise 的 HTTP 客户端，能够在浏览器和 Node.js 环境中运行。它提供了一种简便的方式来执行 HTTP 请求，并支持多种请求方法，如 GET、POST、PUT、DELETE 等。Axios 的配置灵活&#x…...

编程日记 2024/8/14 7:04:42

深度学习 —— 个人学习笔记20（转置卷积、全卷积网络）

声明本文章为个人学习使用，版面观感若有不适请谅解，文中知识仅代表个人观点，若出现错误，欢迎各位批评指正。三十九、转置卷积 import torch from torch import nndef trans_conv(X, K):h, w K.shapeY torch.zeros((X.shape[…...

编程日记 2024/8/14 7:01:38

解决Mac系统Python3.12版本pip安装报错error: externally-managed-environment的问题

遇到的问题在Mac安装了Python3.12.x版本（3.12.3、3.12.4）后，当尝试pip3 install xxx的时候，总是报错：error: externally-managed-environment error: externally-managed-environment This environment is external…...

编程日记 2024/8/14 6:57:34

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/11/6 5:46:16

Cursor实现用excel数据填充word模版的方法

cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中文章目录注意事项逐步生成程序1. 确定格式2. 调试程序注意事项直接给一个excel文件和最终呈现的word文件的示例，…...

编程新知 2025/8/23 5:46:26

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接，私钥连接和常规默认连接任务一开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务任务二修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机传统的知识图谱补全（KGC）模型通过…...

编程新知 2026/1/31 12:03:23

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

tree 树组件大数据卡顿问题优化

问题背景项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/9 23:40:53

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

修改后的部分代码

修改后的完整代码

相关文章：