浅谈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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
JavaScript简介
2015/02/15 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
python对象及面向对象技术详解
2016/07/19 Python
python 内置函数filter
2017/06/01 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
python代码实现图书管理系统
2020/11/30 Python
仓库管理专业个人的自我评价
2013/12/30 职场文书
运动会100米解说词
2014/01/23 职场文书
少先队活动总结
2014/08/29 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
在职证明书模板
2015/06/15 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android