使用插件实现一个html页面多个form表单的异步提交

本文介绍如何使用jQuery、validform及layui实现在HTML页面中多个表单的异步提交，包含代码示例与插件使用说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能名称：实现一个html页面下多个form的提交请求
适用范围：所有的html +jquery 页面
需要插件:jquery 与 validform、llayui
validform地址 validform下载地址官网下载地址
layui地址：https://www.layui.com/

插件一、validform实现多个表单异步提交
html中的代码示例：

<script type="text/javascript" src="引入你的jquery"></script>
<script type="text/javascript" src="引入valiform的.min.js"></script>

<form id="form1">
 <input  name="demo"  type="text" value=""  nullmsg="请填写账号" maxlength="16"  autocomplete="off">
 <button type="submit" name="commit" class="btn btn-primary">提交</button>
</form>


<form id="form2">
 <input  name="demo"  type="text" value=""  nullmsg="请填写账号" maxlength="16"  autocomplete="off">
 <button type="submit" name="commit" class="btn btn-primary">提交</button>
</form>

<form id="form3">
 <input  name="demo"  type="text" value=""  nullmsg="请填写账号" maxlength="16"  autocomplete="off">
 <button type="submit" name="commit" class="btn btn-primary">提交</button>
</form>

js中的片段

$("#form1").Validform({
                    tiptype: function (msg, o, cssctl) {
                        if (!o.obj.is("form")) {
                           //表单验证 失败的表单信息
                           console.log(msg);
                        } else {
                           //ajax提交后的请求返回
                           console.log(msg);
                        }
                    },
                    ajaxPost: true
                });
            })
$("#form2").Validform({
                    tiptype: function (msg, o, cssctl) {
                        if (!o.obj.is("form")) {
                           //表单验证 失败的表单信息
                           console.log(msg);
                        } else {
                           //ajax提交后的请求返回
                           console.log(msg);
                        }
                    },
                    ajaxPost: true
                });
            })
$("#form3").Validform({
                    tiptype: function (msg, o, cssctl) {
                        if (!o.obj.is("form")) {
                           //表单验证 失败的表单信息
                           console.log(msg);
                        } else {
                           //ajax提交后的请求返回
                           console.log(msg);
                        }
                    },
                    ajaxPost: true
                });
            })

ajax后端返回的json格式

{status: "n", info: "密码错误或用户名不存在！"}

注：相关表单的验证使用可以选择查看官网的文档教程。

插件二、layui中自带的表单控件

html中代码：

<link rel="stylesheet" href="你的layui存放路径，这个时链接layui的样式/layui.css"  media="all">
<script type="text/javascript" src="引入你的jquery"></script>
<script type="text/javascript" src="引入layui的.min.js"></script>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="form1">立即提交</button>
    </div>
  </div>
</form>

js中的代码：

layui.use('form', function(){
  var form = layui.form,layer = layui.layer;
  //监听提交
  form.on('submit(form1)', function(data){
    //打印返回的data
    console.log(data);
  });
   form.on('submit(form2)', function(data){
    //打印返回的data
    console.log(data);
  });
   form.on('submit(form3)', function(data){
    //打印返回的data
    console.log(data);
  });
})

注：相关的表单验证与详细的配置信息参考官网文档。

另外附上：原生js搭配html实现多个表单提交的方法