浅谈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树形控件脚本代码
Jul 24 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
node.js基础知识汇总
Aug 25 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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/03/28 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Vue响应式原理详解
2017/04/18 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
原生JS实现自定义滚动条效果
2020/10/27 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
int在python中的含义以及用法
2019/06/27 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python十进制转二进制的详解
2020/02/07 Python
python实现滑雪游戏
2020/02/22 Python
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
企业法人代表任命书
2014/06/06 职场文书
债务纠纷委托书范本
2014/10/14 职场文书