jQuery-laye插件实现 弹框编辑，异步验证，form验证提交
代码中用到了 jQuery的ajax异步处理，each()循环，submit()页面验证提交form表单，prepend()追加标签，laye插件的弹框效果（如有其它弹框效果可参考官网：http://layer.layui.com/），
以及input标签name命名的小技巧。
有问题请在下方留言 代码如下：
<body>
<div class="wrap">
<form method="post" class="form-horizontal js-ajax-form margin-top-20" id="form" action="{{url('admin/container/add')}}">
<div class="form-group">
<label for="input-user_login" class="col-sm-2 control-label">体验店编号</label>
<div class="col-md-2 col-sm-10">
//鼠标离开事件检测体验店代码是否已经存在，js中根据id
<input type="text" class="form-control" pattern="[0-9]" value="" id="container_number" name="container_number">
//消息提示框
<div class="form-required" >
<p id="check_warning"> </p>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">体验店状态</label>
<div class="col-md-2 col-sm-10">
<select class="form-control" name="status">
<option value="1">使用中</option>
<option value="2">维修中</option>
<option value="3">废弃</option>
</select>
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">商品信息</label>
<div class="col-md-6 col-sm-10">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>条形码</th><th>商品名称</th><th>售价</th> <th>优先级</th><th>操作</th>
</tr>
</thead>
<tbody id="add">
<tr>
<td>-</td><td>-</td><td>-</td><td>-</td>
<td><a id='add_goods' onclick='add_goods()' ><i class='fa form-required fa-plus-circle normal'></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<a class="btn btn-default" href="#" onclick="add()">添加体验店</a>
</div>
</div>
</form>
</div>
<script src="{{ asset('/static/themes/admin_simpleboot3/public/assets/js/jquery-1.10.2.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('/lib/layer/2.4/layer.js') }}"></script>
<script> //鼠标离开事件 查询数据库是否存在
$("#container_number").mouseleave(function(){
//清空提示消息
$('#check_warning').html('');
//获取编号
var number = $("#container_number").val();
var url = "{{url('admin/container/checkNumber')}}";
// 异步提交验证
$.ajax({
type:"post",
url:url,
data:{'container_number':number,_token:_token},
dataType:"json",
success:function(data){
if(data == 2){
//清空输入框原有编号
$('#container_number').val('');
var text = '编号:'+number+' 已存在';
//追加新的信息
$('#check_warning').html(text);
}
}
})
}); //批量添加商品
function add_goods(){
//弹框html编辑
var textdiv ="<div id='textdiv'>"+
// 输入框
"<textarea id = 'textarea' class = 'layui-layer-input' style='height: 100px;width: 307.75px;'>例：6666/0000/8888</textarea>"+
// ajax请求返回信息展示
"<p id='error_num' class='form-required'></p>"+
"</div>"; layer.open({
type: 1,
title: '输入商品条形码，多条请以 / 分割',
content: textdiv
,btn: ['提交', '取消']
,yes: function(index, layero){
//按钮【提交】的回调
var num = $('#textarea').val();
var reg = /^[0-9]+.?[0-9,/]*$/;
//正则验证输入信息是否正确
if (reg.exec(num)) {
//提交输入信息并返回data数据
var url = "{{url('admin/container/checkGoods')}}";
$.ajax({
type:"post",
url:url,
data:{'num':num,_token:_token},
dataType:"json",
success:function(data){
//判断返回状态
if(data.code== 1){
$('#error_num').html(' 以上条形码不存在');
}else if(data.code== 2){
$('#error_num').html(' 条形码'+data['msg']+'不存在');
}else if(data.code== 3){
var aHtml = '' ;
//循环返回数据,组装标签
$.each(data.msg, function(i, item){
var existence = $('#barcode_'+item.barcode).val();
//判断商品条形码是否存在，如果不存在追加标签
if(!existence){
//组装form提交返回的商品数组信息
// *注 html中可以根据input标签name的命名把表单数据组装成多维数组返回给后台。例如：name=goods[goods_id]['barcode']
var goods1 = "goods["+item.goods_id+"]['barcode']";
var goods2 = "goods["+item.goods_id+"]['goods_id']";
var goods3 = "goods["+item.goods_id+"]['level']";
//编辑追加内容
aHtml+="<tr id=goods_"+item.barcode+">"+
"<td> <input type='hidden' class='lzt' value="+item.barcode+" id=barcode_"+item.barcode+" name="+goods1+">"+
"<input type='hidden' value="+item.goods_id+" name="+goods2+">"+item.barcode+"</td>"+
"<td>"+item.goods_name+"</td>"+
"<td>"+item.present_price+"</td>"+
"<td><input type='text' style='width: 30px;' value='' name="+goods3+"></td>"+
"<td><a href='#' onclick='del_goods("+item.barcode+")' ><i class='fa fa-minus-circle normal'></i></a></td>"+
"</tr>";
}
});
//向add上方追加html标签，追加方式有很多可以参照相关jquery文档。
$('#add').prepend(aHtml);
//关闭弹出对话框
layer.close(index);
}
}
})
}else{
$('#error_num').html(' 格式错误');
}
}
,btn2: function(index, layero){
//按钮【取消】的回调
//return false //开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
}
}); }; //删除商品
function del_goods(barcode){
$('#goods_'+barcode).remove();
} //体验店信息验证后提交
function add(){
var container_number = $('#container_number').val();
if(!container_number){
layer.msg('请填写体验店编码');
return false;
} var barcode = $('.lzt').val();
if(!barcode){
layer.msg('请添加体验店商品');
return false;
}
//提交表单数据
$("#form").submit();
}
</script>
</body> form提交后打印结果展示
jQuery-laye插件实现 弹框编辑，异步验证，form验证提交的更多相关文章
- layer插件学习——弹框（自定义页）
本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...
- jQuery Validate 插件为表单提供了强大的验证功能
之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...
- jquery Jbox 插件实现弹出窗口在修改的数据之后，关闭弹出窗口刷新父页面的问题
http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面 ...
- vue拖拽插件（弹框拖拽）
// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- jQuery Validate 插件
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- 前端验证，jquery.validate插件
jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用 ...
- iOS 15 无法弹出授权弹框之解决方案---Your app uses the AppTrackingTransparency framework, but we are unable to locate the App Tracking Transparency permission request when reviewed on iOS 15.0
2021年9月30日下午:我正愉快的期盼着即将到来的国庆假期,时不时刷新下appstoreconnect的网址,28号就提上去的包,今天还在审核中....由于这个版本刚升级的xcode系统和新出的iO ...
- jQuery插件之——弹窗框（模态框）leanModal
1.首先在网上下载jquery.leanModal.min.js,添加到你的页面参考网址:https://blog.csdn.net/NTDDLIN... LeanModal.js下载地址: http ...
随机推荐
- maven课程 项目管理利器-maven 3-7 maven依赖范围 2星
本节主要讲了maven的依赖范围: 在pom.xml dependency标签的scope中.eclipse中有编译的路径,maven中有编译,运行,测试的路径. 1 scope为test,为测试 ...
- fd_set实现原理
fd_set是一个结构 /* The fd_set member is required to be an array of longs. */ typedef long int __fd_mask; ...
- 某地理位置模拟APP从壳流程分析到破解
工具与环境 Xposed IDA 6.8 JEB 2.2.5 Fiddler2 010Editor NEXUS 5 Android 4.4 好久不玩逆向怕调试器生锈,拿出来磨磨! 高手莫要见笑,仅供 ...
- libmysqlclient.so.16未找到方法
用mysql命令登录的时候报错: [root@iZ www]# mysql -uroot -p mysql: error while loading shared libraries: libmysq ...
- Sql_Server中如何判断表中某字段是否存在
--比如说要判断表A中的字段C是否存在两个方法: 一, IF EXISTS ( SELECT 1 FROM SYSOBJECTS T1 INNER JOIN SYSCOLUMNS T2 ON T1.I ...
- POJ-2155 Matrix---二维树状数组+区域更新单点查询
题目链接: https://vjudge.net/problem/POJ-2155 题目大意: 给一个n*n的01矩阵,然后有两种操作(m次)C x1 y1 x2 y2是把这个小矩形内所有数字异或一遍 ...
- 【CCPC-Wannafly Winter Camp Day3 (Div1) F】小清新数论（莫比乌斯反演+杜教筛）
点此看题面 大致题意: 让你求出\(\sum_{i=1}^n\sum_{j=1}^n\mu(gcd(i,j))\). 莫比乌斯反演 这种题目,一看就是莫比乌斯反演啊!(连莫比乌斯函数都有) 关于莫比乌 ...
- python 的矩阵运算——numpy
nbarray对象,就类似于C语言的数组!!! 一维数组: nbarray.array([]) 二维数组: nbarray.array([[],[]]) 数组大小: .shape 修改数组的排列: . ...
- [Pytorch] pytorch笔记 <三>
pytorch笔记 optimizer.zero_grad() 将梯度变为0,用于每个batch最开始,因为梯度在不同batch之间不是累加的,所以必须在每个batch开始的时候初始化累计梯度,重置为 ...
- [pytorch] Pytorch入门
Pytorch入门 简单容易上手,感觉比keras好理解多了,和mxnet很像(似乎mxnet有点借鉴pytorch),记一记. 直接从例子开始学,基础知识咱已经看了很多论文了... import t ...