关于layui 绑定form submit提交表单注意点

矫情吗；* 2022-05-18 09:29 400阅读 0赞

<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属性，这个文档没看到具体描述，应该是作为提交按钮的标识

这是文档的介绍

<table> 
 <tbody> 
  <tr> 
   <td>lay-submit</td> 
   <td>无需填写值</td> 
   <td>绑定触发提交的元素，如button</td> 
  </tr> 
 </tbody> 
</table>

2、需要加上lay-filter="标识" 这个属性，这个是layui特有的事件过滤器，个人感觉就是选择器一样

这是文档的介绍

<table> 
 <tbody> 
  <tr> 
   <td>lay-filter</td> 
   <td>任意字符</td> 
   <td>事件过滤器（公用属性），主要用于事件的精确匹配，跟选择器是比较类似的。</td> 
  </tr> 
 </tbody> 
</table>

layui是本人最近学习中的东西，如有说错，欢迎及时留意指出！！

发表评论取消回复

表情：

评论列表（有 0 条评论，400人围观）

还没有评论，来说两句吧...

相关阅读

相关事件绑定(onsubmit)表单提交

事件绑定(onsubmit)表单提交学习路线：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语法（变量）][Jav

客官°小女子只卖身不卖艺/ 2024年03月31日 13:33/ 0 赞/ 89 阅读

相关关于form.submit()不能提交表单的错误原因

来源：[http://www.ido321.com/948.html][http_www.ido321.com_948.html] 直接上代码把： 1: <d

灰太狼/ 2022年08月13日 03:30/ 0 赞/ 224 阅读

相关 Mustache和jq处理form表单的提交与绑定

接着上一篇：[http://blog.csdn.net/joyhen/article/details/48623807][http_blog.csdn.net_joyhen_a

冷不防/ 2022年08月08日 16:54/ 0 赞/ 182 阅读

相关关于layui 绑定form submit提交表单注意点

<form method="post" class="layui-form"> <input type="text" name="name" plac

矫情吗；*/ 2022年05月18日 09:29/ 0 赞/ 401 阅读

相关提交Form表单,submit之前做js判断处理

原文地址：[https://blog.csdn.net/m\_nanle\_xiaobudiu/article/details/79667661][https_blog.csd

旧城等待，/ 2022年05月12日 07:08/ 0 赞/ 297 阅读

相关 SpringMVC——通过form表单绑定数据

今天写一个简单的项目用到form表单绑定数据，这里介绍一下方法。首先需要配置好相应的文件，这个步骤我这里就不再赘述，直接进入主题。我的controller代码如下：

谁践踏了优雅/ 2022年04月18日 02:08/ 0 赞/ 333 阅读

相关 JQ提交form表单的注意事项

> 一，问题 1.1 问题描述最近在使用JQ的方式来提交form表单的时候，发现数据怎么样都传不过去后台那边。检查了后台那边是没问题的，那就是传递参数的时候出问题了。

傷城~/ 2022年04月15日 06:23/ 0 赞/ 369 阅读

相关 layui ajax form 表单提交后清空

1、![20190723152342754.png][] 2、ajax 提交成功后，执行 $("\my\_question")\[0\].reset(); ![201907

旧城等待，/ 2021年09月30日 03:46/ 0 赞/ 820 阅读

相关 layui form 表单ajax 提交

layui.use(['form','jquery'],function(){ //var form = layui.form(),

港控/mmm°/ 2021年09月30日 02:42/ 0 赞/ 911 阅读

相关阻止form表单submit提交

近日在做项目的时候部分需要用到表单验证，原本想用插件进行验证的，结果发现只需要验证一个地方，就想自己用js写一下，过程中发现一个问题，在验证错误的时候需要点击submit时无法

爱被打了一巴掌/ 2021年09月26日 05:34/ 0 赞/ 537 阅读