1. 程式人生 > >layui中彈出層中將確認按鈕變為form表格的提交按鈕

layui中彈出層中將確認按鈕變為form表格的提交按鈕

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); // 關閉彈出層
		}
	});

要想將儲存按鈕變為表單提交的按鈕我們需要在success函式中加入

 然後我們就可以使用layui的監聽事件監聽到提交按鈕了