可以绑定vue方法提交表单,但是需要注意以下几点:

  1. 在form标签上添加lay-filter属性,用于绑定form表单的事件。

  2. 在提交按钮上添加lay-submit属性,用于触发form表单的提交事件。

  3. 在form表单的事件中,通过ajax方式提交表单数据,同时需要设置请求方式为post。

示例代码:

HTML部分:

<form class="layui-form" lay-filter="formDemo">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="demo1">提交</button>
    </div>
  </div>
</form>

JS部分:

//引入layui模块
layui.use(['form', 'jquery'], function(){
  var form = layui.form;
  var $ = layui.jquery;
  
  //监听提交事件
  form.on('submit(demo1)', function(data){
    //阻止表单跳转
    event.preventDefault();
    //ajax方式提交表单数据
    $.ajax({
        url: '/submit-form',
        type: 'POST',
        data: data.field,
        success: function(res){
            //提交成功后的操作
        },
        error: function(err){
            //提交失败后的操作
        }
    });
    return false;
  }); 
});

需要注意的是,如果走到了get请求方式,可能是因为在form表单的事件中设置了错误的请求方式。建议检查代码中是否有设置请求方式的代码,如有,请确认设置的请求方式是否为post。

form class=layui-form可以绑定vue方法提交表单吗绑定之后走到了get请求方式我设置的post

原文地址: https://www.cveoy.top/t/topic/beeh 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录