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>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gitlab实现CI/CD自动化部署

gitlab实现CI/CD自动化部署 项目根目录中新增gitlab-ci.yml在gitlab上查看gitlab-runner配置方法配置服务器环境推送代码&#xff0c;触发runner&#xff0c;实现自动构建和部署参考 gitlab支持通过配置CI/CD实现自动化部署我们的代码项目&#xff0c;主要核心就是配置gitlab-c…

【mamba学习】(一)SSM原理与说明

mamba输入输出实现与transformer几乎完全一样的功能&#xff0c;但速度和内存占用具有很大优势。对比transformer&#xff0c;transformer存在记忆有限的情况&#xff0c;如果输入或者预测的序列过长可能导致爆炸&#xff08;非线性&#xff09;&#xff0c;而mamba不存在这种情…

【精通SDL之----SDL_RenderReadPixels截屏】

SDL_RenderReadPixels截屏 前言一、SDL_RenderReadPixels简介二、问题现象三、规避方案1. 离屏纹理2. ding! *灵光一现* 前言 最近使用SDL2在鸿蒙系统(Harmoney OS)上截取视频播放过程中的数据&#xff0c;发现捕获的数据为空&#xff0c;然在windows上却可以正常捕获&#xff…

Linux-软件管理

文章目录 19. 软件管理19.1 linux软件介绍19.2 RPM包概述19.3 RPM软件包安装19.4 RPM软件包依赖问题19.5 DPKG软件包19.6 linux 软件包前端工具19.7 windows 前端工具winget19.8 linux 前端工具yum概述19.9 设置yum远程仓库19.10 yum 软件包管理19.11 epel软件仓库19.12 yum本地…

海康相机二次开发学习笔记1-环境配置

因为最近可以用一段时间海康加密狗,Visionpro二次开发暂时停更一段时间,开始记录一下海康相机二次开发的学习笔记. 环境配置 1. 创建项目 打开Visual Studio,新建.NetFramework项目,选择WindowsForms,点击下一步,选择项目名称,点击下一步,点击确定打开项目属性,点击生成选项…

TED: 1靶场复现【附代码】(权限提升)

机下载地址&#xff1a; Ted: 1 ~ VulnHubTed: 1, made by Avraham Cohen. Download & walkthrough links are available.https://www.vulnhub.com/entry/ted-1,327/ 1. 主机发现端口扫描目录扫描敏感信息获取 1.1. 主机发现 nmap -sn 192.168.59.0/24|grep -B 2 00:0C…

面试题:什么是 Redis 的雪崩、穿透和击穿?Redis 崩溃之后会怎么样?该如何应对这种情况?如何处理 Redis 的穿透?

面试题&#xff1a;什么是 Redis 的雪崩、穿透和击穿&#xff1f;Redis 崩溃之后会怎么样&#xff1f;该如何应对这种情况&#xff1f;如何处理 Redis 的穿透&#xff1f; 面试题面试官心理分析面试题剖析缓存雪崩缓存穿透缓存击穿 面试题 了解什么是 Redis 的雪崩、穿透和击穿…

百度智能云发布3款轻量级+2款场景大模型

文心大模型ERNIE 3.5是目前百度智能云千帆大模型平台上最受欢迎的基础大模型之一。针对用户的常见通用的对话场景&#xff0c;ERNIE 3.5 在指令遵循、上下文学习和逻辑推理能力三方面分别进行了能力增强。 ERNIE Speed作为三款轻量级大模型中的“大个子”&#xff0c;推理场景…

微调LLama 3.1——七月论文审稿GPT第5.5版:拿早期paper-review数据集微调LLama 3.1

前言 对于llama3&#xff0c;我们之前已经做了针对llama3 早7数据微调后的测评 去pk llama2的早7数据微调后&#xff0c;推理测试集中的早期paper&#xff1a;出来7方面review去pk gpt4推理测试集中的早期paper&#xff1a;7方面reviewground truth是早期paper的7方面人工rev…

Mysql-B树和B+树的区别

当我们为ID去建立一个主键索引的时候&#xff0c;Mysql底层就会为我们去维护一棵树的结构&#xff0c;从而提升我们的数据检索效率&#xff0c;树的共同特性&#xff1a;小的索引在左边&#xff0c;大的索引在右边&#xff0c;每一次结点的寻址&#xff0c;都是一次磁盘的IO&am…

Linux 基本指令讲解 上

linux 基本指令 clear 清屏 Alt Enter 全屏/退出全屏 pwd 显示当前用户所处路径 cd 改变目录 cd /root/mikecd … 返回上级目录cd - 返回最近所处的路径cd ~ 直接返回当前用户自己的家目 roor 中&#xff1a;/root普通用户中&#xff1a;/home/mike mkdir 创建一个文件夹(d) …

简单的class.getResource与classLoader.getResource区别

简单的getClass().getResource()与ClassLoader.getResource()区别 1.简介 我们在springboot项目中&#xff0c;如果要获取到自己配置的资源或者配置类信息一般会用到Class.getResource()或ClassLoader.getResource()&#xff0c;这两种方式在使用的过程中很容易混淆&#xff…

智慧景区系统:科技赋能旅游新体验

随着信息技术的飞速发展&#xff0c;旅游业正经历着前所未有的变革&#xff0c;智慧景区系统作为这一变革的先锋&#xff0c;正以其独特的魅力重塑着游客的旅行方式。智慧景区系统&#xff0c;顾名思义&#xff0c;是运用物联网、大数据、云计算、人工智能等现代信息技术&#…

NFT 合约:部署 ERC 721 到 Testnet 并发布

目录 1. 创建智能合约2. 配置 Network3. 配置发布脚本4. 执行发布命令Refs1. 创建智能合约 访问: https://wizard.openzeppelin.com/#erc721 填入必要信息,勾选选项。然后点击【Download】下载 hardhat 开发版本。 2. 配置 Network 在 hardhat.config.ts 中添加网络配置:…

Golang面试题六(GMP)

目录 1.Go线程实现模型 1:1 关系 N:1关系 M:N关系 2.GM模型 3.GMP模型 概念 模型简介 有关P和M的个数问题 P和M何时会被创建 4.调度器的设计策略 5.go func() 调度流程 6.调度器的生命周期 7.Go work stealing 机制 8.Go hand off 机制 9.Go 抢占式调度 9.Sys…

外卖O2O系统开发源码开源介绍

外卖O2O系统开发源码开源介绍 开源外卖O2O系统源码可以为开发者提供快速搭建外卖平台的基础&#xff0c;节省从零开始的开发时间。 以下是几个推荐的开源项目&#xff1a; flash-waimai 是一个基于Spring Boot和Vue.js的前后端分离的外卖系统&#xff0c;包含手机端和后台管理…

spring boot 发送微信小程序订阅消息

首先我们需要订阅一个消息&#xff1a; 订阅教程本文章并未提起&#xff0c;感兴趣的同学自行百度。 我们可以看到订阅消息中【消息内容】有很多参数&#xff0c;我们在发送消息时就需要将这些参数进行填充&#xff0c;当然填充的时候要注意格式&#xff0c;如果格式不对还是会…

LDR6020在Type-C手机同时充电与USB2.0数据传输方案

随着科技的飞速发展&#xff0c;Type-C接口已成为智能手机等移动设备的主流充电和数据传输接口。为了满足用户对于高效充电与稳定数据传输的双重需求&#xff0c;乐得瑞科技推出的LDR6020芯片凭借其卓越的性能和丰富的功能&#xff0c;为Type-C手机提供了同时充电与USB2.0数据传…

关于归并排序:

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_urlhttps%3A%2F return 语句开始之后&#xff0c;会执行之前剩余遗留下的语句和状态#include<bits/stdc.h> using namespace std…

使用RestHighLevelClient进行Elasticsearch Function Score查询

简介 Function Score查询在Elasticsearch中是一个强大的工具&#xff0c;它允许我们根据一个或多个函数来调整查询结果的相关性得分。这使得我们可以基于某些条件对搜索结果进行更精细的控制。本文将介绍如何在Java应用程序中使用Elasticsearch的RestHighLevelClient执行Funct…