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 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
关于vue-router路径计算问题
May 10 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python实现多线程的两种方式分析
2018/08/29 Python
Python 实现微信防撤回功能
2019/04/29 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
浅析Python requests 模块
2020/10/09 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
《都江堰》教学反思
2014/02/07 职场文书
母亲节感恩寄语
2014/02/21 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
出国留学担保书
2014/05/20 职场文书
廉洁自律个人总结
2015/02/14 职场文书
感恩教师节主题班会
2015/08/12 职场文书
二年级作文之动物作文
2019/11/13 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript