浅谈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 相关文章推荐
js的写法基础分析
Jan 17 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
移动节点的jquery代码
Jan 13 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
简单分析javascript中的函数
Sep 10 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
详解http访问解析流程原理
Oct 18 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 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缓存技术的多种方法小结
2012/08/14 PHP
php自定义hash函数实例
2015/05/05 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Python 第一步 hello world
2009/09/25 Python
python写xml文件的操作实例
2014/10/05 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
项目合作计划书
2014/01/09 职场文书
医学生自我评价
2014/01/27 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
如何做好工作总结!
2019/04/10 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
JavaScript 反射学习技巧
2021/10/16 Javascript