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>