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获取事件对象代码
Aug 05 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
简单的JS轮播图代码
Jul 18 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 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
3种php生成唯一id的方法
2015/11/23 PHP
PHP如何使用Memcached
2016/04/05 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
js select常用操作控制代码
2010/03/16 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python实现的文件同步服务器实例
2015/06/02 Python
python冒泡排序简单实现方法
2015/07/09 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
深入浅析Python传值与传址
2018/07/10 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
Linux常见面试题
2013/03/18 面试题
法学个人求职信范文
2014/01/27 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
24年收藏2000多部退役军用电台
2022/02/18 无线电
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏