layui踩坑记录之form表单下的button按钮默认自动提交

这篇具有很好参考价值的文章主要介绍了layui踩坑记录之form表单下的button按钮默认自动提交。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先参考下面这篇文章:

layui form表单下的button按钮会自动提交表单的问题以及解决方案_layui form里面其他button按钮_你用点心就行的博客-CSDN博客

他说的已经很清楚了,我再补充(啰嗦)一下:

其实就是使用form的时候,应该对应有一个提交按钮,配套使用。其他功能按钮相加多少就加多少,但是必须要有一个提交按钮。

layui的官网说的也是比较清楚的,通过给按钮button加上“lay-submit”属性来表示它作为一个提交按钮,标准写法如下:

 <button class="layui-btn" lay-submit lay-filter="demo-submit">提交按钮</button>
 <button class="layui-btn" id="test-btn-other">普通按钮</button>

官方文档地址:

表单组件 form - Layui 文档 

因此,当我们在使用form的时候,如果没有添加标准的提交按钮,会自动默认把其他的普通按钮认为是提交按钮,因为button的type默认值为“submit”。

使用时注意:

1.在form中使用button时添加type属性:button、submit、reset;

2.在不需要提交的场景使用form时尽量使用a标签按钮来代替button,比如筛选功能中的查询按钮;

3.在form中使用了添加lay-submit属性的button时,尽量加上监听事件防止默认提交:文章来源地址https://www.toymoban.com/news/detail-601440.html

form.on('submit(formDemo)',function(data){
    ......
    return false;
});

到了这里,关于layui踩坑记录之form表单下的button按钮默认自动提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用element的form表单,实现显示后端错误信息,并且如果有错误信息(前端通过rules检测的错误信息或者后端传过来的错误信息(如该用户已经注册或该邮箱已经存))点击提交按钮不会再次发起异步请求

    前提(触发方式可以有两种触发 trigger: \\\'blur\\\'   或 trigger: \\\'change\\\' ) 主要是三个要点: 1.给el-form-item标签设置error属性,并且绑定data里面的数据(也即:error=\\\"emailError\\\"): 2.设置rules规则为 改变trigger触发方式,设置为trigger: \\\'change\\\' (如果是trigger: \\\'blur\\\',表单项(el-form-item)的input输入

    2024年02月03日
    浏览(38)
  • C# Winform中在DataGridView中添加Button按钮,操作Button按钮

    .Net的DataGridView控件中,提供了一种列的类型,叫 DataGridViewButtonColumn ,这种列类型是展示为一个 按钮,可以给button赋予相应的text,并且,此button可以用来做处理事件的判断依据。 DataGridViewButtonColumn,虽然在UI展现上,是一个BUTTON的样子,但是,它的实际形态,并不是传统意

    2024年02月07日
    浏览(39)
  • Android 之 Button (按钮)与 ImageButton (图像按钮)

    今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮; 其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节 只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到Button 上!我们

    2024年02月07日
    浏览(41)
  • layui的form.on的使用

    一.容器所在的form代码里要有form的class=“layui-form” 二、该组建的属性里要有lay-sumbit 和lay-filter如上图片中的button 三、form.on的使用要在 layui.use([‘table’,‘form’,‘layer’], function(){}中 例: 四、form.on(‘submit(这里面是组键的lay-filter)’)

    2024年02月16日
    浏览(26)
  • android去除按钮(Button)背景、边框,使按钮背景透明【创建无边框按钮】

    android 中的按钮是最常用到的一种控件,因此网上对于修改按钮样式的问题也非常多。在自定义样式中,有一个常见的需求就是去除按钮背景。比如下图的情况: 左边的按钮图标可以使用 ImageButton 或 ImageView 来加载一个透明背景的icon。而右边只显示文字的按钮则只能使用普通

    2024年02月02日
    浏览(51)
  • Flutter组件--按钮(Button)组件

      属性  说明 onPressed 必填参数,按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示禁用相关样式 child 子组件 style 通过ButtonStyle装饰 ButtonStylee里面的常用的参数 属性名称 值类型  属性值 foregroundColor Color 文本颜色 backgroundColor Color 按钮的颜色 shadowColor Col

    2024年02月14日
    浏览(27)
  • Python GUI设计——Button功能按钮

    目录 1.简介 1.1定时程序设计 1.2颜色选择程序设计 2.使用Lambda表达式 3.建立含图像的功能按钮 4.简易计算器按钮设计 5.设计鼠标光标在功能按钮上的的形状 功能按钮也称为按钮,在窗口组件中可以设计在单击功能按钮时,执行某一个特定的动作,这个动作也称为callback方法,

    2024年02月09日
    浏览(27)
  • 微信小程序:修改按钮BUTTON尺寸

      微信小程序当中通过wxss来设置button的宽高值并不起效果,而size属性却只有两个合法值,当我们想要自定义大小时则: 在 标签中直接写 style即可: (当前为开发者模式无法进入会话,真机调试即可看到效果) 

    2024年02月11日
    浏览(45)
  • 【Unity】Button基础-按钮更换图片样式

    话说,今天修改了一下项目中的内容,发现按钮不怎么好看,想用图片的方式改一改,然后点开Button,忽然发现好多内容都忘记了。。。 Transition(过渡方式):按钮在状态改变时自身的过渡方式: Color Tint(颜色改变)  Sprite Swap(图片切换)  Animation(执行动画)(后面有

    2023年04月14日
    浏览(36)
  • 微信小程序button按钮去除边框

    今天在小程序开发中想要去除按钮的边框,直接使用 border: none 不起作用,选择器后加一个::after伪元素才行。 例: button:: after{ border: none }

    2024年02月06日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包