浅谈layui 绑定form submit提交表单的注意事项


Posted in Javascript onOctober 25, 2019

如下所示:

<form method="post" class="layui-form">
					<input type="text" name="name" placeholder="用户名" required lay-verify="required" class="layui-input layui-form-danger login-input" >
					<input type="password" name="password" placeholder="密码" required lay-verify="required" class="layui-input layui-form-danger login-input">
					<button class="layui-btn layui-btn-fluid login-btn" lay-submit lay-filter="login" >登录</button>
				</form>
			</div>
			
		</div>
		
		<script type="text/javascript">
 
    $(function () {
      layui.use('form', function(){
       var form = layui.form;
       //监听提交
       form.on('submit(login)', function(data){
        console.log(data);
        return false;
       });
      });
    })
		</script>

绑定button按钮作为提交按钮

1、必须加上lay-submit属性,这个文档没看到具体描述,应该是作为提交按钮的标识

这是文档的介绍

lay-submit 无需填写值 绑定触发提交的元素,如button

2、需要加上lay-filter="标识" 这个属性,这个是layui特有的事件过滤器,个人感觉就是选择器一样

这是文档的介绍

lay-filter 任意字符 事件过滤器(公用属性),主要用于事件的精确匹配,跟选择器是比较类似的。

layui是本人最近学习中的东西,如有说错,欢迎及时留意指出!!

以上这篇浅谈layui 绑定form submit提交表单的注意事项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
js漂浮广告实现代码
Aug 15 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
js实现返回顶部效果
Mar 10 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 #Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 #Javascript
vue实现弹幕功能
Oct 25 #Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 #Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 #Javascript
layui form表单提交后实现自动刷新
Oct 25 #Javascript
jquery实现购物车基本功能
Oct 25 #jQuery
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中字典的基本知识初步介绍
2015/05/21 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python创建学生成绩管理系统
2019/11/22 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
Python字符串三种格式化输出
2020/09/17 Python
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
销售文员的岗位职责
2013/11/20 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
详解Python类和对象内容
2021/06/22 Python
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
方法汇总:Python 安装第三方库常用
2022/04/26 Python