jQuery.validator自定义验证

时间:2021-02-17 23:16:07

需求:在新增信息前端验证必须上传图片,在修改时不用。

思路:无论在新增还是在修改,图片都会有<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 : "必填"
            }
        }