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 ...
随机推荐
- 学习.NET好书推荐
我之前看过很多书,最近也买了些新书,无论已经看过的,还是正准备要看的,我都做了收藏.这些书涉及面较为广泛,都是平时看社区文章和技术杂志时收藏的,全部来自技术达人和架构师们的推荐,经过我的综合评估(销量 ...
- Flask-Script-Migrate
Flask-Script 从字面意思上来看就是 Flask 的脚本 是的,熟悉Django的同学是否还记得Django的启动命令呢? python manager.py runserver 大概是这样 ...
- 高仿饿了么mock本地数据
未使用router新版webpack.dev.conf.js配置本地数据访问:// 引入express 模块 const express = require('express') // 创建expre ...
- Linux 学习 三， linux 文件结构
linux 的文件结构 linux 下的bin 目录,包含了常用的命令应用程序 /bin: bin为binary的简写主要放置一些系统的必备执行档例如:cat.cp.dmesg.gzip.kill.l ...
- 【Node.js】Stream（流）的学习笔记
最近学习使用Node.js创建http proxy server,少不了要跟Stream打交道.昨天开始查阅一些资料,多少有了一些粗浅了解.整理在这里,供学习之用. 从Node.js API文档中可知 ...
- 安装office提示Office 16 Click-to-Run Extensibility Component
今天安装office时,提示Office 16 Click-to-Run Extensibility Component或者Office 15 Click-to-Run Extensibility C ...
- python3绘图示例6-2（基于matplotlib，绘图流程介绍及设置等）
#!/usr/bin/env python# -*- coding:utf-8 -*- import os import numpy as npimport matplotlib as mpltfro ...
- Vim中根据正则对选中文本对齐(比如ini文件的=号对齐)
vimrc增加如下内容即可: vnoremap <M-=> :call Duiqi('\v(^\s*\S+)\s+(.*)')<CR> "reg匹配的第2段文字对齐 ...
- 问题解决 Visual Studio 2015 无法复制文件“D:\swapfile.sys”
莫名其妙的问题..度娘 必应统统不给力.. 还是找了谷大爷 严重性 代码 说明 项目 文件 行 列 类别 源 项目级别 工具 禁止显示状态错误 无法复制文件“D:\swapfile.sys”,原因是找 ...
- April 20 2017 Week 16 Thursday
We are all in the gutter, but some of us are looking at the stars. 我们都生活在阴沟里,但仍有人仰望星空. In the past m ...