Layui——隐藏表单项后不再进行验证
目录
修改后的部分代码
修改后的完整代码
- 我编辑用户信息和添加新用户用的是同一个表单，不同的是编辑用户信息里没有密码项和确认密码项，但是把它们隐藏后仍然要进行验证，也就是说它们俩的验证并没有随着表单项的隐藏而关闭。
- 原因：关闭不彻底，一共有两步。隐藏表单项的同时，需要把表单项里的 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——隐藏表单项后不再进行验证
目录 修改后的部分代码 修改后的完整代码 我编辑用户信息和添加新用户用的是同一个表单，不同的是编辑用户信息里没有密码项和确认密码项，但是把它们隐藏后仍然要进行验证，也就是说它们俩的验证并没有随着表单项的隐藏而关闭。原因…...
Github Copilot 使用技巧
🎯目标读者 本文不包含如何安装 Github Copilot本文介绍了 Github Copilot 使用方法和一些技巧 本人已经使用 Github Copilot 2 年了，交了 3 次年费，每年 100$ 着实心痛，但是用着确实爽歪歪 但是感觉一直只用了一小部分功能&am…...
【实现100个unity特效之20】用unity实现物品悬浮和发光像素粒子特效
最终效果 文章目录 最终效果新增飞升粒子效果光圈效果修改不同颜色完结 新增飞升粒子效果 效果 光圈效果 效果 修改不同颜色 完结 赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，你的每一次支持…...
GPT-4o mini发布，轻量级大模型如何颠覆AI的未来？
从巨无霸到小巨人：GPT-4o Mini的创新之路 ©作者|潇潇 来源|神州问学 引言 随着人工智能技术的飞速进步，AI领域的竞争日益激烈，大型模型的发布几乎成为常态。然而，这些庞大的模型通常需要大量的计算资源和存储空间ÿ…...
高性能的 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…...
合合信息OCR支持30类国内常见票据一站式分类识别，支持医疗发票、数电票识别
合合信息TextIn平台明星产品——国内通用票据识别，重磅更新！ 产品支持票据类型扩展到23大类、30小类，覆盖场景更全面，同时升级优化了多款票据识别模型，平均识别率较前版本提升11.5%，整体识别速度提升21.9%…...
LeetCode-day40-3151. 特殊数组 I
LeetCode-day40-3151. 特殊数组 I 题目描述示例示例1：示例2：示例3： 思路代码 题目描述 如果数组的每一对相邻元素都是两个奇偶性不同的数字，则该数组被认为是一个 特殊数组 。 Aging 有一个整数数组 nums。如果 nums 是一个 特殊…...
技术研究：Redis 数据结构与 I/O 模型
数据结构 Redis之所以“快”，一方面因为它是内存数据库，所有操作都在内存上完成，内存的访问速度本来就快。另一方面则是因为高效的数据结构，使得操作键值效率较高。总体来说，Redis使用了一个用来保存每个Key/Value的全…...
46-扇孔的处理及铺铜以及布线
1.先连信号线 2.电源管脚,以如下方式处理： 引线打孔处理...
LVS实验的三模式总结
文章目录 LVS的概念叙述NAT工作模式实战案例**思想：**NAT工作模式的优点NAT工作模式的缺点 NAT工作模式的应用场景大致配置 route：打开路由内核功能 部署DR模式集群案例工作思想：大致工作图如下思路模型 具体配置与事实步骤补充 防火墙标签解…...
游戏安全入门-扫雷分析远程线程注入
前言 无论学习什么，首先，我们应该有个目标，那么入门windows游戏安全，脑海中浮现出来的一个游戏 – 扫雷，一款家喻户晓的游戏，虽然已经被大家分析的不能再透了，但是我觉得自己去分析一下还是极好…...
bert-base-chinese模型的完整训练、推理和一些思考
前言 使用google-bert/bert-base-chinese模型进行中文文本分类任务，使用THUCNews中文数据集进行训练，训练完成后，可以导出模型，进行预测。 项目详细介绍和数据下载 数据集下载地址 Github完整代码 现记录训练过程中的一些感悟…...
JS基础5（JS的作用域和JS预解析）
JS的作用域 1. 全局作用域 全局作用域是在代码的任何地方都能访问到的最外层作用域。在浏览器环境下，全局作用域就是window对象，因此所有在全局作用域中声明的变量和函数都会成为window对象的属性和方法。 var globalVar "I am global"; …...
)
Doris 夺命 30 连问！(中)
导言 抱歉，作为从 S2 开始的骨灰级玩家看到 EDGUZI 官宣首发上线，兴奋之余忘了写文档 - -||，还望各位看官老爷见谅，这次错了，下次还敢 ^_^ 这是继上次的 30 问上篇的中篇，也是 10 个问题，有些…...
书生.浦江大模型实战训练营——（四）书生·浦语大模型全链路开源开放体系
最近在学习书生.浦江大模型实战训练营，所有课程都免费，以关卡的形式学习，也比较有意思，提供免费的算力实战，真的很不错（无广）！欢迎大家一起学习，打开LLM探索大门…...
SpringBoot 整合 RabbitMQ 实现延迟消息
一、业务场景说明 用于解决用户下单以后，订单超时如何取消订单的问题。 用户进行下单操作（会有锁定商品库存、使用优惠券、积分一系列的操作）；生成订单，获取订单的id；获取到设置的订单超时时间࿰…...
Cilium：基于开源 eBPF 的网络、安全性和可观察性
基于 eBPF 的网络、安全性和可观察性 Cilium 是一种开源的云原生解决方案，它利用 Linux 内核中的 eBPF 技术来提供、保护和监控工作负载之间的网络连接。 什么是 eBPF？ eBPF 是一项源自 Linux 内核的技术，允许沙盒程序在特权上下文&#x…...
Axios 详解与使用指南
Axios 详解与使用指南 1. Axios 简介 Axios 是一个基于 Promise 的 HTTP 客户端，能够在浏览器和 Node.js 环境中运行。它提供了一种简便的方式来执行 HTTP 请求，并支持多种请求方法，如 GET、POST、PUT、DELETE 等。Axios 的配置灵活&#x…...
深度学习 —— 个人学习笔记20（转置卷积、全卷积网络）
声明 本文章为个人学习使用，版面观感若有不适请谅解，文中知识仅代表个人观点，若出现错误，欢迎各位批评指正。 三十九、转置卷积 import torch from torch import nndef trans_conv(X, K):h, w K.shapeY torch.zeros((X.shape[…...
解决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…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...
git: early EOF
macOS报错： Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...
消防一体化安全管控平台：构建消防“一张图”和APP统一管理
在城市的某个角落，一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延，滚滚浓烟弥漫开来，周围群众的生命财产安全受到严重威胁。就在这千钧一发之际，消防救援队伍迅速行动，而豪越科技消防一体化安全管控平台构建的消防“…...
【深度学习新浪潮】什么是credit assignment problem？
Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...
Vue 3 + WebSocket 实战：公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战：公司通知实时推送功能详解 📌 收藏 点赞 关注，项目中要用到推送功能时就不怕找不到了！ 实时通知是企业系统中常见的功能，比如：管理员发布通知后，所有用户…...