浅谈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 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
Jqprint实现页面打印
Jan 06 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
JavaScript实现alert弹框效果
Nov 19 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+ajax制作无刷新留言板
2015/10/27 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python中的作用域规则详解
2015/01/30 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
《云雀的心愿》教学反思
2014/02/25 职场文书
大学新生入学教育方案
2014/05/16 职场文书
十佳少年事迹材料
2014/12/25 职场文书
加入学生会自荐书
2015/03/05 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
九不准学习心得体会
2016/01/23 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
springboot用户数据修改的详细实现
2022/04/06 Java/Android