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 ...
随机推荐
- DIV三列同行
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Select2实现的带搜索的省市区三级联动代码 设置默认初始值
$(function() { $('#loc_province').select2('val','2456'); $('#loc_province').change(); $('#loc_city') ...
- CSS透明度设置（兼容性）
一句话搞定透明背景! .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opa ...
- SharePoint 计时器作业
本文将介绍 SharePoint 2010 的默认计时器作业,即我们通常说的Timer服务.计时器作业在 SharePoint Server 的特定 Windows 服务中运行.计时器作业还是执行定时 ...
- check_mk插件 redis
/usr/lib/check_mk_agent/plugins/mk_redis #!/bin/bash echo '<<<redis>>>' hosts=$(ne ...
- vos设置可呼出手机或固话
问题: 默认公司只让呼出手机号码,但有的客户要求能打固话,怎么办? 落地网关——补充设置——落地前缀——落地被叫改写规则 在改写规则里添加固话号段即可 具体案例: 5201——1表示让520号段只能拨 ...
- Python基础学习之语句和语法
语句和语法 python语句中有一些基本规则和特殊字符: 井号键“#”表示之后的字符为python注释: 三引号(‘‘‘ ’’’)可以多行注释 换行“\n”是标准的行分隔符(通常一个语句一行): 反斜 ...
- 504. Inverted Index (Map Reduce) lintcode
https://www.lintcode.com/problem/inverted-index-map-reduce/description -- decription of the map redu ...
- IOS 设置颜色的的详情
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- 【洛谷5251】[LnOI2019] 第二代图灵机（线段树+ODT）
点此看题面 大致题意: 有单点修改数字和区间着色两种修改操作,询问你某段区间内包含所有颜色且数字和最小的子区间的数字和,或某段区间内没有重复颜色且数字和最大的子区间的数字和.数据随机. \(ODT\) ...