浅谈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 兼容firefox的一些问题
May 21 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
jquery常用操作小结
Jul 21 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
详解如何在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
无线电的诞生过程
2021/03/01 无线电
PHP也可以?成Shell Script
2006/10/09 PHP
用php来检测proxy
2006/10/09 PHP
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
微信小程序模拟cookie的实现
2018/06/20 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python 系统调用的实例详解
2017/07/11 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
电子商务专员岗位职责
2013/12/11 职场文书
银行求职信个人范文
2013/12/16 职场文书
四下基层实施方案
2014/03/28 职场文书
读书活动总结
2014/04/28 职场文书
节能环保标语
2014/06/12 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python