jquery validate 验证radio

最新推荐文章于 2021-03-02 02:08:25 发布

Nightliar

最新推荐文章于 2021-03-02 02:08:25 发布

阅读量5.6k

点赞数 1

分类专栏： jquery 文章标签： jaunty validate

本文链接：https://blog.csdn.net/Nightliar/article/details/59108805

版权

jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="html"><div class="row cl">  
    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>优惠券类型：</label>  
    <div class="formControls col-xs-8 col-sm-9 skin-minimal">  
        <div class="radio-box">  
            <input name="couponType" type="radio" value="1" id="couponType_1" <#if couponInfo.couponType == 1>checked</#if>>  
            <label for="couponType_1">满减券</label>  
        </div>  
        <div class="radio-box">  
            <input type="radio" name="couponType" value="2" id="couponType_2" <#if couponInfo.couponType == 2>checked</#if>>  
            <label for="couponType_2">折扣券</label>  
        </div>  
        <div class="radio-box">  
            <input type="radio" name="couponType" value="3" id="couponType_3" <#if couponInfo.couponType == 3>checked</#if>>  
            <label for="couponType_3">现金券</label>  
        </div>  
    <label id="couponType-error" for="couponType" class="error"></label>  
    </div>  
</div>  
  
<div class="row cl" id="couponMax_div">  
    <label class="form-label col-xs-4 col-sm-3">优惠最高金额：</label>  
    <div class="formControls col-xs-8 col-sm-9">  
        <input type="text" class="input-text" placeholder="仅在折扣券的情况下填写" name="couponMax"  
               id="couponMax" value="${couponInfo.couponMax}">  
    </div>  
</div>

其中，自定义错误提示位置只需修改<label id="couponType-error" for="couponType" class="error"></label>所在的位置即可，id和for的内容可以在浏览器中F12查看到。

$("#form-member-add").validate({  
    rules:{  
        sendCouponType:{  
            required:true  
        },  
        platformId:{  
            required:true  
        },  
        couponType:{  
            required:true  
        }  
    },  
    onkeyup:false,  
    focusCleanup:true,  
    success:"valid",  
    submitHandler:function(form){  
        var couponInfo = getCouponParameter();  
        saveCouponInfo(couponInfo);  
    }  
});  
  
function saveCouponInfo(couponInfo){  
    $.ajax({  
       type:'POST',  
       url: "/coupon/save",  
       data: {  
           couponStr:couponInfo  
       },  
       async: false,  
       success: function(data){  
           if(data.code == 200){  
                var index = parent.layer.getFrameIndex(window.name);  
                parent.$('#btn_search').click();  
                parent.layer.close(index);  
           }else layer.alert("操作失败");  
       }  
    });   
}  
  
  
// 获取优惠券表单值  
var getCouponParameter = function(){  
    var couponInfo = {};  
    couponInfo.id = couponId;  
    //优惠券活动名称  
    couponInfo.couponName = $('#couponName').val();  
    //使用范围  
    couponInfo.couponUsingRange = $("input[name='couponUsingRange']:checked").val();  
    //发放类型  
    couponInfo.sendCouponType = $("input[name='sendCouponType']:checked").val();  
    //使用平台  
    couponInfo.platformId = $("input[name='platformId']:checked").val();  
    //优惠券类型  
    couponInfo.couponType = $("input[name='couponType']:checked").val();  
    //优惠券使用限制  
    couponInfo.meetPrice = $('#meetPrice').val();  
    //优惠券面额  
    couponInfo.couponAmount = $('#couponAmount').val();  
    //活动起始时间  
    couponInfo.couponStartDate = $('#couponStartDate').val();  
    //活动结束时间  
    couponInfo.couponEndDate = $('#couponEndDate').val();  
    //优惠券数量  
    couponInfo.couponNum = $('#couponNum').val();  
    //用户领取优惠券数量限制  
    couponInfo.limitGetNum = $('#limitGetNum').val();  
    //备注  
    couponInfo.remark = $('#remark').val();  
      
    return JSON.stringify(couponInfo);  
}  
  
$("input:radio[name='couponType']").click(function(){  
    //1.满减券      2.折扣券       3.现金券  
    var tt = $(this).val();  
    switch(tt){  
        case '1' :  
            $('#couponMax_div').hide();  
            break;  
        case '2' :  
            $('#couponMax_div').show();  
            break;  
        case '3' :  
            $('#couponMax_div').hide();  
            break;  
        default:  
            break;  
    }  
});

上面为验证并向后台传参数，并且给radio绑定监听事件。