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 ...
随机推荐
- centos系统安装mysql
方式一. 通过yum install mysql-server安装mysql服务器.chkconfig mysqld on设置开机启动,并service mysqld start启动mysql服务,并 ...
- Python数据类型及常用操作
Python字符串类型 1.用途: 用来记录有描述性的状态.比如:人名,地址等. 2.定义方式: 创建字符串非常简单,在‘ ’,“ ”,‘’‘ ’‘’内一填写一系列的字符例如:msg='hello' ...
- 让你迅速了解redis
(1)什么是redis? Redis 是一个基于内存的高性能key-value数据库. (2)Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数 ...
- CSS3伪类使用方法实例
有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了. 下面有一段实例大家可以参考一下: <!DOCTYPE html> < ...
- linux脚本的source和reload
什么时候用reload?有些程序, 当你修改了配置文件后, 需要重启之后, 配置才能生效,但是 这个程序又不能 重启 , 如大公司的httpd服务 因此, 当你修改完了之后, 需要在不重启服务的情况下 ...
- .Net core2.0日志组件Log4net、Nlog简单性能测试
.Net core之Log4net.Nlog简单性能测试 比较log4net.nlog的文件写入性能(.netcore环境),涉及代码和配置如有不正确的地方,还请批评指正. 原创,转载请著名出处:ht ...
- Java线程堆栈分析
不知觉间工作已有一年了,闲下来的时候总会思考下,作为一名Java程序员,不能一直停留在开发业务使用框架上面.老话说得好,机会是留给有准备的人的,因此,开始计划看一些Java底层一点的东西,尝试开始在学 ...
- CentOS7下SSH服务学习笔记
测试环境: [root@nmserver-7 ~]# uname -aLinux nmserver-7.test.com 3.10.0-514.el7.centos.plus.i686 #1 SMP ...
- Html + JS ： 点击对应的按钮，进行选择是隐藏还是显示（用户回复功能）
例如: 当我点击按钮1时,点击第一下进行显示This is comment 01,点击第二下隐藏This is comment 01 当我点击按钮2时,点击第一下进行显示This is comment ...
- 修改Linux中发送邮件中附件大小的限制
方法一: 在命令中设定postfix的message_size_limit值 (但系统重启后会失效) postconf -e "message_size_limit = 20480000&q ...