功能名称:实现一个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实现多个表单提交的方法