浅谈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困惑—包装集 DOM节点
Oct 16 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 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
Laravel 5框架学习之表单
2015/04/08 PHP
php计算年龄精准到年月日
2015/11/17 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python实现泊松图像融合
2018/07/26 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
结婚保证书范文
2014/04/29 职场文书
高考标语大全
2014/06/05 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
大学生个人总结范文
2015/02/15 职场文书
煤矿安全保证书
2015/02/27 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android