jQuery.validator自定义验证

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

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值