1. 程式人生 > >layui---事件監聽

layui---事件監聽

radi color 不用 round 改變 容器 開啟 lock log

在使用layui的form表單做驗證提交的時候,如果結合vue,或者是三級聯動的時候,就需要做事件監聽了。

具體語法:

form.on(‘event(過濾器值)‘, callback);

可以用於監聽:select,checkbox,switch,radio,submit 的改變

一、監聽select的改變

<!-- 不用form 用div也可以 -->
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label"
>下拉選擇框</label> <div class="layui-input-block"> <select name="interest" lay-filter="aihao"> <option value="0">寫作</option> <option value="1">閱讀</option> <option value="2">聽歌</option
> <option value="4">遊戲</option> </select> </div> </div> </form> <script type="text/javascript" src="./layui/layui.js"></script> <script type="text/javascript"> layui.use(form, function(){ var form =
layui.form; form.on(select(aihao),function(data){ console.log(data); console.log(data.elem); //得到select原始DOM對象 console.log(data.value); //得到被選中的值 console.log(data.othis); //得到美化後的DOM對象 }); }); </script>

同理,監聽checkbox復選

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對象
});

監聽switch開關:

form.on(‘switch(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對象
}); 

監聽radio單選:

form.on(‘radio(filter)‘, function(data){
    console.log(data.elem); //得到radio原始DOM對象
    console.log(data.value); //被點擊的radio的value值
});

監聽submit提交:

<button lay-submit lay-filter="*">提交</button>
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; //阻止表單跳轉。如果需要表單跳轉,去掉這段即可。
});

layui---事件監聽