首页 > 编程 > JavaScript > 正文

jQuery validate 验证radio实例

2019-11-19 17:21:56
字体:
来源:转载
供稿:网友

具体代码如下所示:

<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绑定监听事件。

以上所述是小编给大家介绍的jQuery validate 验证radio实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表