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 ...
随机推荐
- 认识web
URL详解: URL是Uniform Resource Locator 的简写,统一资源定位符. 一个URL由以下几部分组成: scheme:代表的是访问的协议,一般为http或者https以及ftp ...
- git分支合并冲突
合并冲突 如果你在两个不同的分支中,对同一个文件的同一个部分进行了不同的修改,Git 就没法干净的合并它们. 如果你对 #53 问题的修改和有关 hotfix 的修改都涉及到同一个文件的同一处,在合并 ...
- VMWare 9 安装 win8
http://tieba.baidu.com/p/1954912175 http://down.51cto.com/data/497803 win8专业版:NBCCB-JJJDX-PKBKJ-KQX8 ...
- .NET 后台动态添加GridView列
BoundField bfColumn1 = new BoundField(); bfColumn1.DataField = "zbcompanyname"; bfColumn1. ...
- Eclipse jee 3.7常用插件安装手记
最近在折腾Maven,于是想重新配置一个Eclipse环境,插件安装挺折腾人的,尤其天朝的网络,你懂的,伤不起啊,因此特地把正确的过程记录下来,供大家参考,节省时间 1.官网下载eclipse-jee ...
- java并发编程 volatile关键字 精准理解
1.volatile的作用 一个线程共享变量(类的成员变量.类的静态成员变量等)被volatile修饰之后,就具有以下作用: 1)并发中的变量可见性(不同线程对该变量进行操作时的可见性),即一个线程修 ...
- mysql-数据库模式定义语言（DDL）
库的管理 /* 一.库的管理 创建.修改.删除 二.表的管理 创建.修改.删除 创建: create 修改: alter 删除: drop */ #一.库的管理 #.库的创建 /* 语法: creat ...
- Homebrew 安装及更新软件
brew brew install 安装 brew uninstall 卸载 brew update 更新 homebrew brew upgrade 安装已更新软件 brew cleanup 清理 ...
- ztree的数据绑定
ztree用法(1)首先引用ztree的css和js <link type="text/css" rel="stylesheet" href=" ...
- CVE-2017-8464 LNK文件（快捷方式）远程代码执行漏洞复现
北京时间2017年6月13日凌晨,微软官方发布6月安全补丁程序,“震网三代” LNK文件远程代码执行漏洞(CVE-2017-8464)和Windows搜索远程命令执行漏洞(CVE-2017-8543) ...