浅谈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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
搭建vue开发环境
Jul 19 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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分页效率终结版(推荐)
2013/07/01 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
深入理解PHP中的count函数
2016/05/31 PHP
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python数据化运营的重要意义
2019/11/25 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
公司员工活动策划方案
2014/08/20 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
工资证明范本
2015/06/12 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
详解OpenCV曝光融合
2022/04/29 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle