点击layer弹出层按钮实现弹出层中form表单验证

silversoldier

墨衍会员 · AI 创作全网分发码龄9年

关注

VIP免费原创最新推荐文章于 2024-03-27 12:34:06 发布 1.6w 阅读 AI 写同款· GEO 优化 ›

前言

在使用layui弹出层时，想着在点击弹出层中“确定”按钮时，也能触发弹出层中form表单的验证。最后找到一个还算可以的答案，参考https://fly.layui.com/jie/5581/，结合自己的理解，实现了这个功能。

具体实现

整体思路就是在弹出层form表单页面中设置一个隐藏的提交按钮，然后在layer弹出层点击“确定”按钮时，找到form表单中隐藏的提交按钮，触发点击事件，即可实现验证功能。

这里使用的是部门信息html文件：departmentList.html和addDepartment.html。

重点查看新增部门的js代码段和form表单中设置的隐藏提交按钮即可。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{~/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body>
    <button class="layui-btn" id="add">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <table id="depOperation" lay-filter="depOperation"></table>

<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script th:src="@{~/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    var rowData;    // 用于接收表格一行数据的全局变量
    layui.use(['table','layer'],function () {
        var table = layui.table;
        var layer = layui.layer;
        // var form = layui.form;
        renderTable();
        function renderTable() {
            table.render({
                elem: '#depOperation',
                height: '350',
                url: '/department/info',
                page: true,
                cols: [
                    [
                        {field: 'dId', title: 'ID', width:200, sort: true, fixed: 'left'},
                        {field: 'dName', title: '部门名称', width:200, edit:'text'},
                        {field: 'dWorktime', title: '上班时间', width:300},