layui事件監聽

參考地址：https://www.layui.com/doc/modules/form.html

截圖：

 

 語法：form.on('event(過濾器值)', callback);

form模塊在 layui 事件機制中注冊了專屬事件，所以當你使用layui.onevent()自定義模塊事件時，請勿占用form名。form支持的事件如下：

event	描述
select	監聽select下拉選擇事件
checkbox	監聽checkbox復選框勾選事件
switch	監聽checkbox復選框開關事件
radio	監聽radio單選框事件
submit	監聽表單提交事件

默認情況下，事件所監聽的是全部的form模塊元素，但如果你只想監聽某一個元素，使用事件過濾器即可。
如：<select lay-filter="test"></select>

form.on('select(test)', function(data){
  console.log(data);
});

監聽select選擇

下拉選擇框被選中時觸發，回調函數返回一個object參數，攜帶兩個成員：

form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM對象
  console.log(data.value); //得到被選中的值
  console.log(data.othis); //得到美化后的DOM對象
});  

請注意：如果你想監聽所有的select，去掉過濾器(filter)即可。下面將不再對此進行備注。

 

監聽checkbox復選

復選框點擊勾選時觸發，回調函數返回一個object參數，攜帶兩個成員：

 

form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM對象
  console.log(data.elem.checked); //是否被選中，true或者false
  console.log(data.value); //復選框value值，也可以通過data.elem.value得到
  console.log(data.othis); //得到美化后的DOM對象
});      

監聽submit提交

按鈕點擊或者表單被執行提交時觸發，其中回調函數只有在驗證全部通過后才會進入，回調返回三個成員：

 

form.on('submit(*)', function(data){
  console.log(data.elem) //被執行事件的元素DOM對象，一般為button對象
  console.log(data.form) //被執行提交的form對象，一般在存在form標簽時才會返回
  console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}
  return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});

再次溫馨提示：上述的submit(*)中的 * 號為事件過濾器的值，是在你綁定執行提交的元素時設定的，如：

<button lay-submit lay-filter="*">提交</button> 

你可以把*號換成任意的值，如：lay-filter="go"，但監聽事件時也要改成 form.on('submit(go)', callback);