浅谈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 相关文章推荐
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
JS严格模式知识点总结
Feb 27 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
如何对react hooks进行单元测试的方法
Aug 14 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript显示选择目录对话框的代码
2008/11/10 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
详解Python3 基本数据类型
2019/04/19 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
如何在C# winform中异步调用web services
2015/09/21 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
联欢会开场白
2015/06/01 职场文书
python执行js代码的方法
2021/05/13 Python
如何用python清洗文件中的数据
2021/06/18 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL