可以绑定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。

layui form 绑定vue方法提交表单并设置POST请求

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

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