浅谈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构建页面的DOM节点结构的实现代码
Dec 09 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 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
PHP批量生成缩略图的代码
2008/07/19 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
vue axios同步请求解决方案
2017/09/29 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
python机器学习库xgboost的使用
2020/01/20 Python
Django 再谈一谈json序列化
2020/03/16 Python
如何用python 操作zookeeper
2020/12/28 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
交通安全教育制度
2014/02/02 职场文书
中学生自我鉴定
2014/02/04 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
环保建议书
2014/03/12 职场文书
产品销售计划书
2014/05/04 职场文书
医院党建工作总结2015
2015/05/26 职场文书
公司周年庆寄语
2019/06/21 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL