在使用 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; // 阻止表单跳转. 如果需要表单跳转, 去掉这段即可.
- });
本文转载自: https://www.cnblogs.com/e0yu/p/10629221.html
更多 web 开发 https://www.html.cn/ ,Web 前端课程 https://www.html.cn/ 的相关知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/layui/17965.html