浅谈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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
12个非常有用的JavaScript技巧
2017/05/17 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
对python中dict和json的区别详解
2018/12/18 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
会展策划与管理专业求职信
2014/06/09 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
优秀团员事迹材料
2014/12/25 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Python代码风格与编程习惯重要吗?
2021/06/03 Python
python四种出行路线规划的实现
2021/06/23 Python
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
拙作再改《我的收音机情缘》
2022/04/05 无线电