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+jquery等)
Mar 24 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
express中static中间件的具体使用方法
Oct 17 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
python数据结构之图的实现方法
2015/07/08 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
Python多分支if语句的使用
2020/09/03 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
党校毕业心得体会
2014/09/13 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
maven依赖的version声明控制方式
2022/01/18 Java/Android