在使用layui的form表單做驗證提交的時候，如果結(jié)合vue，或者是三級聯(lián)動的時候，就需要做事件監(jiān)聽了。

具體語法：

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

可以用于監(jiān)聽：select，checkbox，switch，radio，submit 的改變

一、監(jiān)聽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>

同理，監(jiān)聽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對象 });

監(jiān)聽switch開關(guān)：

form.on('switch(filter)', function(data){ 　　console.log(data.elem); //得到checkbox原始DOM對象 　　console.log(data.elem.checked); //開關(guān)是否開啟，true或者false 　　console.log(data.value); //開關(guān)value值，也可以通過data.elem.value得到 　　console.log(data.othis); //得到美化后的DOM對象 });

監(jiān)聽radio單選：

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

監(jiān)聽submit提交：

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