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 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 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
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP多文件上传类实例
2015/03/07 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
js数组的操作指南
2014/12/28 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
Python 常用模块 re 使用方法详解
2019/06/06 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
keras中的backend.clip用法
2020/05/22 Python
python GUI模拟实现计算器
2020/06/22 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
2014高三学生考试作弊检讨书
2014/12/14 职场文书
团员个人年度总结
2015/02/26 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python