需求:在新增信息前端验证必须上传图片,在修改时不用。
思路:无论在新增还是在修改,图片都会有<img>标签进行预览,只是新增的时候img.src不会有值。所以我们通过这个值来判断是新增还是修改。
// 在修改信息时,图片不用必填 // 要求在input上写data-img-according-to="图片预览的id" $.validator.addMethod("imgAccordingTo", function (value, ele, params) { // value:期望值 ele:被选元素, params:求留言告知 var accordingObjData = $("#" + $(ele).data("img-according-to")).attr("src"); // 获得data-img-according-to属性的值,该值指向判断img.src值的dom if(accordingObjData) { return true; } else { return $(ele).val(); // 虽然返回的是value,但是根据js的判断规则,非null,非空字符串,非undefined都是true } }, "必填");
<img id="img-file-display" style="width: 150px;height: 150px;" src="${filePrefix}${entity.img}" alt="上传广告图片"/> <input type="file" class="form-control" name="imgFile" id="imgFile" placeholder="上传广告图片" data-img-according-to="img-file-display"/>
rules: { imgFile : { imgAccordingTo : true } }, messages: { imgFile : { imgAccordingTo : "必填" } }