jQuery validate 验证radio实例
具体代码如下所示:
<divclass="rowcl">
<labelclass="form-labelcol-xs-4col-sm-3"><spanclass="c-red">*</span>优惠券类型:</label>
<divclass="formControlscol-xs-8col-sm-9skin-minimal">
<divclass="radio-box">
<inputname="couponType"type="radio"value="1"id="couponType_1"<#ifcouponInfo.couponType==1>checked</#if>>
<labelfor="couponType_1">满减券</label>
</div>
<divclass="radio-box">
<inputtype="radio"name="couponType"value="2"id="couponType_2"<#ifcouponInfo.couponType==2>checked</#if>>
<labelfor="couponType_2">折扣券</label>
</div>
<divclass="radio-box">
<inputtype="radio"name="couponType"value="3"id="couponType_3"<#ifcouponInfo.couponType==3>checked</#if>>
<labelfor="couponType_3">现金券</label>
</div>
<labelid="couponType-error"for="couponType"class="error"></label>
</div>
</div>
<divclass="rowcl"id="couponMax_div">
<labelclass="form-labelcol-xs-4col-sm-3">优惠最高金额:</label>
<divclass="formControlscol-xs-8col-sm-9">
<inputtype="text"class="input-text"placeholder="仅在折扣券的情况下填写"name="couponMax"id="couponMax"value="${couponInfo.couponMax}">
</div>
</div>
其中,自定义错误提示位置只需修改<labelid="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){
varcouponInfo=getCouponParameter();
saveCouponInfo(couponInfo);
}
});
functionsaveCouponInfo(couponInfo){
$.ajax({
type:'POST',
url:"/coupon/save",
data:{
couponStr:couponInfo
},
async:false,
success:function(data){
if(data.code==200){
varindex=parent.layer.getFrameIndex(window.name);
parent.$('#btn_search').click();
parent.layer.close(index);
}elselayer.alert("操作失败");
}
});
}
//获取优惠券表单值
vargetCouponParameter=function(){
varcouponInfo={};
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();
returnJSON.stringify(couponInfo);
}
$("input:radio[name='couponType']").click(function(){
//1.满减券2.折扣券3.现金券
vartt=$(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绑定监听事件。
以上所述是小编给大家介绍的jQueryvalidate验证radio实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!