使用插件实现一个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实现多个表单提交的方法

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

任聪聪

创作不易,你的打赏是我的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值