功能名称：实现一个html页面下多个form的提交请求
适用范围：所有的html +jquery 页面
需要插件:jquery 与 validform、llayui
validform地址 validform下载地址 官网下载地址
layui地址：/
插件一、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){//打印返回的dataconsole.log(data);});form.on('submit(form2)', function(data){//打印返回的dataconsole.log(data);});form.on('submit(form3)', function(data){//打印返回的dataconsole.log(data);});})
注：相关的表单验证与详细的配置信息参考官网文档。
另外附上 ：原生js搭配html实现多个表单提交的方法
