jQuery validate 驗(yàn)證radio實(shí)例
具體代碼如下所示:
<div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>優(yōu)惠券類型:</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">現(xiàn)金券</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">優(yōu)惠最高金額:</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>
其中,自定義錯(cuò)誤提示位置只需修改<label id="couponType-error" for="couponType" class="error"></label>
所在的位置即可,id和for的內(nèi)容可以在瀏覽器中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("操作失敗"); } }); } // 獲取優(yōu)惠券表單值 var getCouponParameter = function(){ var couponInfo = {}; couponInfo.id = couponId; //優(yōu)惠券活動(dòng)名稱 couponInfo.couponName = $('#couponName').val(); //使用范圍 couponInfo.couponUsingRange = $("input[name='couponUsingRange']:checked").val(); //發(fā)放類型 couponInfo.sendCouponType = $("input[name='sendCouponType']:checked").val(); //使用平臺(tái) couponInfo.platformId = $("input[name='platformId']:checked").val(); //優(yōu)惠券類型 couponInfo.couponType = $("input[name='couponType']:checked").val(); //優(yōu)惠券使用限制 couponInfo.meetPrice = $('#meetPrice').val(); //優(yōu)惠券面額 couponInfo.couponAmount = $('#couponAmount').val(); //活動(dòng)起始時(shí)間 couponInfo.couponStartDate = $('#couponStartDate').val(); //活動(dòng)結(jié)束時(shí)間 couponInfo.couponEndDate = $('#couponEndDate').val(); //優(yōu)惠券數(shù)量 couponInfo.couponNum = $('#couponNum').val(); //用戶領(lǐng)取優(yōu)惠券數(shù)量限制 couponInfo.limitGetNum = $('#limitGetNum').val(); //備注 couponInfo.remark = $('#remark').val(); return JSON.stringify(couponInfo); } $("input:radio[name='couponType']").click(function(){ //1.滿減券 2.折扣券 3.現(xiàn)金券 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; } });
上面為驗(yàn)證并向后臺(tái)傳參數(shù),并且給radio綁定監(jiān)聽事件。
以上所述是小編給大家介紹的jQuery validate 驗(yàn)證radio實(shí)例,希望對(duì)大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery操作select詳解(取值,設(shè)置選中)
本篇文章主要是對(duì)jquery操作select(取值,設(shè)置選中)進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02jQuery powerFloat萬能浮動(dòng)層下拉層插件使用介紹
支持hover, click, focus以及無事件觸發(fā);支持多達(dá)12種位置的定位,出界自動(dòng)調(diào)整;支持頁面元素加載,Ajax加載,下拉列表,提示層效果,tip類效果等;可自定義裝載容器;內(nèi)置UI不錯(cuò)的裝載容器;支持鼠標(biāo)跟隨等。2010-12-12jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié),對(duì)于操作jquery的朋友可以參考下。2010-04-04jQuery ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03jQuery實(shí)現(xiàn)簡單評(píng)論區(qū)功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單評(píng)論區(qū)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10jquery判斷對(duì)象是否為空并遍歷對(duì)象的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query判斷對(duì)象是否為空并遍歷對(duì)象的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jQuery html()方法使用不了無法顯示內(nèi)容的問題
jquery中的html方法使用不了,只能用完最基本的innerHTML把內(nèi)容展示出來2014-08-08jQuery實(shí)現(xiàn)手風(fēng)琴小案例
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)手風(fēng)琴小案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04