jQuery validate 验证radio实例


Posted in Javascript onMarch 01, 2017

具体代码如下所示:

<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实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
js树形控件脚本代码
Jul 24 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 #Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 #Javascript
分分钟玩转Vue.js组件(二)
Mar 01 #Javascript
js实现带三角符的手风琴效果
Mar 01 #Javascript
JavaScript拖动层Div代码
Mar 01 #Javascript
vue组件间通信解析
Mar 01 #Javascript
性能优化之代码优化页面加载速度
Mar 01 #Javascript
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
JS中操作JSON总结
2020/12/06 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
一百多行python代码实现抢票助手
2018/09/25 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python 星号(*)的多种用途
2020/09/21 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
授权委托书样本
2014/04/03 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
和睦家庭事迹
2014/05/14 职场文书
个人授权委托书
2014/09/15 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
校运会通讯稿
2015/07/18 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers