基于layui-form的图片必填验证提示(图片必须上传的校验)

效果图

未上传图片时定位标红并提示

详情:让图片显示在input框内,用input框代替图片边框.
点击图片框上传图片后,把路径填入input.
因为必填,所以没必要设置清空按键.

html:

<div class="layui-form-item">
  <label class="layui-form-label ">营业执照</label>
  <input id="productImage" name="productImage" class="img-input" readonly="readonly" autocomplete="off" lay-verify="required" />
  
  <div class="busi_lic_uploaded">
    <img src="" alt="">
  </div>

</div>

css:

.img-input {
  cursor: pointer;
  border: 1px dashed;
  width: 150px;
  height: 149px;
  left: 10px;
  background: url(../img/upload.jpg) no-repeat;
  background-position: 50% 50%;
}

.busi_lic_uploaded {
  display: none;
}

.busi_lic_uploaded img {
  width: 182px;
  height: 114px;
}

js

 var uploadInst = upload.render({
    elem: '#upload_busi_lic' //绑定元素
    , url: containercode_url + '/file/imageUpload' //上传接口
    , done: function (res) {
      //上传完毕回调
      businessLicenseUrl = res.data;
      $('.img-input').css('display', `none`);
      $('.busi_lic_uploaded').css('display', `block`);
      $('.img-input').val(businessLicenseUrl); //把图片路径赋值给input框,防止再次校验
      $('.busi_lic_uploaded img').attr('src', businessLicenseUrl); //图片链接（base64）
    }
    , error: function () {
      //请求异常回调
    }
  });