coding++ :Layui-监听事件
在使用layui的form表单做验证提交的时候,如果结合vue,或者是三级联动的时候,就需要做事件监听了。
具体语法:
form.on('event(过滤器值)', callback);
可以用于监听:select,checkbox,switch,radio,submit 的改变
1):监听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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});

coding++ :Layui-监听事件的更多相关文章
- python hook监听事件
python hook监听事件 作者:vpoet mail:vpoet_sir@163.com # -*- coding: utf-8 -*- # # by oldj http://oldj.net/ ...
- Android中Button的五种监听事件
简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...
- Second Day: 关于Button监听事件的三种方法(匿名类、外部类、继承接口)
第一种:通过匿名类实现对Button事件的监听 首先在XML文件中拖入一个Button按钮,并设好ID,其次在主文件.java中进行控件初始化(Private声明),随后通过SetOnClickLis ...
- js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件
页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...
- android listview 的监听事件
今天遇到了一个比较让我头疼的问题,不过追根揭底只是我对listview理解的不够透彻罢了, 闲言少叙,说说我遇到的问题吧: 上篇随笔我写了关于listview的使用,如果你也已经写好了列表那么恭喜这一 ...
- Android成长日记-Android监听事件的方法
1. Button鼠标点击的监听事件 --setOnClickListener 2. CheckBox, ToggleButton , RadioGroup的改变事件 --setOnCheckedCh ...
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
- javascript事件有哪些?javascript的监听事件
事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- jquery实现拖拽以及jquery监听事件的写法
很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...
随机推荐
- Mac 常见命令行
1. unrar解压rar文件 1.1 安装命令:brew install unrar 1.2 解压文件:unrar x test.rar 2. 创建文件夹:mkdir 文件夹名 3. 删除文件夹: ...
- 2019年最新老男孩高性能Web架构与自动化运维架构视频教程
课程目录L001-老男孩架构15期-Web架构之单机时代L002-老男孩架构15期-Web架构之集群时代L003-老男孩架构15期-Web架构之dnsL004-老男孩架构15期-Web架构之缓存体系L ...
- 将url转化成file文件
let img = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,28489740 ...
- 区间DP(力扣1000.合并石头的最低成本)
一.区间DP 顾名思义区间DP就是在区间上进行动态规划,先求出一段区间上的最优解,在合并成整个大区间的最优解,方法主要有记忆化搜素和递归的形式. 顺便提一下动态规划的成立条件是满足最优子结构和无后效性 ...
- Pocket+Evernote 打造个人知识库体系
俗话说巧妇难为无米之炊,还是那个不太恰当的例子. 写作就好比人类的消化系统,想要持续的输出...那么就要持续的输入... 今天就来说一说如何进行持续有效的输入. 信息处理过程 先放一张图,这是我的整个 ...
- 01.UNIX基础知识
1.UNIX体系结构 什么叫做内核? 内核是一种软件,它控制计算机硬件资源,并提供程序的运行环境. 什么叫操作系统? 在广义上,操作系统包括了内核和一些其他软件,这些软件使得计算机能够发挥作用,如可以 ...
- c# 导出excel的两种常见方法
1,不是用第三方插件(html直接输出) StringBuilder ssb = new StringBuilder(); StringBuilder sb = new StringBuilder() ...
- windows git pull或者push代码时弹出安全框解决办法
目录 1.打开控制面板->凭据管理器>删除已有的git凭证 2.新增一个凭证 @ 如果报如下错误: 1.打开控制面板->凭据管理器>删除已有的git凭证 2.新增一个凭证 网络 ...
- WSGI标准、MVC和MTC框架
WSGI服务: wsgiref模块其实就是将整个请求信息给封装了起来,就不需要你自己处理了,假如它将所有请求信息封装成了一个叫做request的对象,那么你直接request.path就能获取到用户这 ...
- 【转】linux中ifconfig 命令详解详解
1 概述 ifconfig工具不仅可以被用来简单地获取网络接口配置信息,还可以修改这些配置.用ifconfig命令配置的网卡信息,在网卡重启后机器重启后,配置就不存在.要想将上述的配置信息永远的存的电 ...