在form表单中，动态增加input框，最多添加5个，删除校验
html代码
<form class="layui-form" th:action="@{/basicInfo/update/project}" method="post">
<div class="layui-form-item" id="last">
<label class="layui-form-label">开发项目核准名
</label>
<div class="layui-input-inline">
<input type="text" id="projectApprovalName" name="projectApprovalName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input input-double-width">
<input class="layui-input" type="hidden" id="id" name="id" th:value="${estateInfo.id}">
</div>
<div class="layui-input-inline" style="margin-left: 180px">
<button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<span class="layui-word-aux">备注：最多添加5个项目核准名，每个长度为2-15个字符
</span>
</div>
</form>
js代码
<script type
="text/javascript" th
:inline
="javascript">
layui
.use([ 'layer', 'upload'], function () {
var $
= layui
.jquery
;
var layer
= layui
.layer
;
var upload
= layui
.upload
;
var id
= $("#id").val();
var basePath
=[[$
{#httpServletRequest
.getContextPath()}]];
var max
= 5;
var x
= 1;
$("#add").click(function(){
if(x
<max
){
var str
= '<div class="layui-form-item">'+
'<label class="layui-form-label"></label>'+
'<div class="layui-input-inline">'+
'<input type="text" name="projectApprovalName" class="layui-input input-double-width">'+
'</div>'+
'<div class="layui-input-inline" style="margin-left: 180px">'+
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>'+
'</div>'+
'</div>';
$("#last").append(str
);
x
++;
}else {
layer
.msg("最多添加5条信息",{icon
:2});
}
});
$("body").on('click',".removeclass",function(){
if(x
>1){
var approvalName
= $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle
= $(this).parent().parent();
$
.ajax({
url
:basePath
+'/basicInfo/findByApprovalNameAndEstateId',
type
:"get",
data
:{'id':id
,'projectApprovalName':approvalName
},
dataType
:"json",
success
:function(res
){
if(res
.code
!==200){
layer
.msg('项目核准名 '+approvalName
+' 已被引用，禁止删除', {icon
: 2, title
:'提示'});
}else {
parentEle
.remove();
x
--;
}
}
});
}
});
var approvalNameStr
= [[$
{estateInfo
.projectApprovalName
}]];
var approvalNameArr
= approvalNameStr
.split(',');
$
.each(approvalNameArr
,function (i
,json
) {
if(i
===0){
$("#projectApprovalName").val(json
);
}
if(i
>0){
var str
= '<div class="layui-form-item">'+
'<label class="layui-form-label"></label>'+
'<div class="layui-input-inline">'+
'<input type="text" name="projectApprovalName" value="'+json
+'" class="layui-input input-double-width">'+
'</div>'+
'<div class="layui-input-inline" style="margin-left: 180px">'+
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>'+
'</div>'+
'</div>';
$("#last").append(str
);
}
x
=i
+1;
});
})
</script
>
