代码中用到了 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('&nbsp;&nbsp;以上条形码不存在');
                     }else if(data.code== 2){
                        $('#error_num').html('&nbsp;&nbsp;条形码'+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('&nbsp;&nbsp;格式错误');
            }
         }
         ,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验证提交的更多相关文章
	

    
								
  1. layer插件学习——弹框（自定义页）
		
    本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...
    
		
    2. 
						
  2. jQuery Validate 插件为表单提供了强大的验证功能
		
    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...
    
		
    3. 
						
  3. jquery Jbox 插件实现弹出窗口在修改的数据之后，关闭弹出窗口刷新父页面的问题
		
    http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面 ...
    
		
    4. 
						
  4. vue拖拽插件（弹框拖拽）
		
    // =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...
    
		
    5. 
						
  5. 《JQuery常用插件教程》系列分享专栏
		
    <JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
    
		
    6. 
						
  6. jQuery Validate 插件
		
    >>>>>>>>>>>>>>>>>>>>>>>>> ...
    
		
    7. 
						
  7. 前端验证，jquery.validate插件
		
    jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用 ...
    
		
    8. 
						
  8. 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 ...
    
		
    9. 
						
  9. jQuery插件之——弹窗框（模态框）leanModal
		
    1.首先在网上下载jquery.leanModal.min.js,添加到你的页面参考网址:https://blog.csdn.net/NTDDLIN... LeanModal.js下载地址: http ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JavaScript 数组（Array）
			
    //声明方式 //调用 Array构造函数创建并赋值 var users = new Array(); //new 可以省略 ); //new 可以省略 var users3 = new Array( ...
    
			
    2. 
						
  2. jquery 根据日期计算年龄
			
    <script type="text/javascript"> //jquery页面加载完成后,根据后端的出生日期,计算年龄 $(function () { // 获得 ...
    
			
    3. 
						
  3. cube.js 开源模块化分析框架
			
    cube.js 是一款很不错的模块化web 应用分析框架.cube.js 的设计主要是面向serverless 服务, 但是同时也支持所有rdbms, cube.js不是一个单体应用,包含了以下部分: ...
    
			
    4. 
						
  4. 实现AB值对换的两种方法
			
    package com.smbea.demo.exchange; /** * AB对换 * @author hapday * @2017年1月22日 @上午12:36:24 */ public cla ...
    
			
    5. 
						
  5. R.java文件无法自动生成的问题
			
    如果出现R.java文件无法自动生成的问题,同时Console窗口提示下列信息: Android requires compiler compliance level 5.0 or 6.0. Foun ...
    
			
    6. 
						
  6. Struts2_Action和Result总结
			
    Action 1.实现一个Actiond的最常用方式:从ActionSupport继承2.DMI动态方法调用3.通配符配置 *{1}{2}... a) *_*4.接收参数的方法(一般用属性或者Doma ...
    
			
    7. 
						
  7. vsftpd配置
			
    yum -y install vsftpd useradd upload -s /sbin/nologin passwd upload mkdir /data/upload chown -R upol ...
    
			
    8. 
						
  8. c++基础（积少成多）
			
    1.#include<string> #include<iostream> 这是引用头文件: 2.Using namespace std; 这是引用命名空间,防止同一个命名空间 ...
    
			
    9. 
						
  9. iOS获取/删除url中的参数
			
    1.获取URL中的某个参数: - (NSString *)getParameter:(NSString *)parameter urlStr:(NSString *)url { NSError *er ...
    
			
    10. 
						
  10. 笨办法学Python（三十一）
			
    习题 31: 作出决定 这本书的上半部分你打印了一些东西,而且调用了函数,不过一切都是直线式进行的.你的脚本从最上面一行开始,一路运行到结束,但其中并没有决定程序流向的分支点.现在你已经学了 if,  ...
    
			
    11.