layui中弹出层中将确认按钮变为form表格的提交按钮

本文介绍如何利用Layer弹窗组件创建一个角色添加界面，包括设置弹窗属性、按钮事件回调、表单验证及渲染等关键步骤，确保用户输入的角色名和描述符合规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layer.open({
       type : 1,
       title : '添加角色',
       area : [ '500px', '350px' ],
       shadeClose : true, // 点击遮罩关闭
       content : html,
       btn : [ '保存', '取消' ],
       success : function(layero, index) { // 成功弹出后回调
           // 解决按enter键重复弹窗问题
           $(':focus').blur();
           // 添加form标识
           layero.addClass('layui-form');
           // 将保存按钮改变成提交按钮
           layero.find('.layui-layer-btn0').attr({
               'lay-filter' : 'addRole',
               'lay-submit' : ''
           });
           // 表单验证
           form.verify({
               roleName : function(value, item) {
                   if (!new RegExp("^[a-zA-Z0-9_|\u4e00-\u9fa5\]{2,10}$")
                           .test(value)) {
                       return '角色名必须为2-10位且不能有特殊字符';
                   }
               },
               roleDesc : function(value, item) {
                   if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\]{2,200}$")
                           .test(value)) {
                       return '角色描述必须为2-200位且不能有特殊字符';
                   }
               }
           });
           // 刷新渲染(否则开关按钮会不显示)
           form.render('checkbox');
       },
       yes : function(index, layero) { // 确认按钮回调函数
           // 监听提交按钮
           form.on('submit(addRole)', function(data) {
           });
       },
       btn2 : function(index, layero) { // 取消按钮回调函数
           layer.close(index); // 关闭弹出层
       }
   });