基于JavaScript实现带数据验证和复选框的表单提交


Posted in Javascript onAugust 23, 2017

实现:

1.用户至少选中某项,即表示选中该行,同时该行的数据验证通过,表单提交;否则,不提交。

html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>带数据验证和复选框的表单提交</title> 
 <script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"></script> 
 <style type="text/css"> 
  table { 
   border-collapse: collapse; 
  } 
  td,th { 
   width: 40px; 
   height: 100px; 
   border:1px solid #000; 
  } 
  table tbody tr:hover { 
   background-color: red; 
  } 
  table tbody tr:not(:first-child):hover {background-color: #666; 
  } 
  td input[name='number']{ 
   width: 100px; 
  } 
 </style> 
</head> 
<body> 
 <form action="http://www.baidu.com" id="order_shopping" name="order_shopping" method="get" onsubmit="return checkShopping();"> 
  <table id="table" class="fl"> 
   <thead> 
    <tr> 
     <th>商品名</th> 
     <th>单价</th> 
     <th>购买数量</th> 
     <th><input id="both" type="checkbox" name="both" autocomplete="off"></th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>香蕉</td> 
     <td>100</td> 
     <td><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></td> 
     <td> 
      <input type="checkbox" name="choice" autocomplete="off"> 
     </td> 
    </tr> 
    <tr> 
     <td>苹果</td> 
     <td>100</td> 
     <td><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></td> 
     <td> 
      <input type="checkbox" name="choice" autocomplete="off"> 
     </td> 
    </tr> 
   </tbody> 
  </table> 
  <input type="submit" id="add_shopping" value="添加购物车"/> 
 </form> 
 <p id="msg"></p> 
</body> 
</html>

js:

<script type="text/javascript"> 
  $(function(){ 
   //全选 
   $("input[name='both']").click(function(){ 
    var $isSelected = $(this).is(":checked"); 
    for(var i = 0;i<$("input[name='choice']").length;i++){ 
     $("input[name='choice']")[i].checked = $isSelected; 
     } 
    }) 
  }); 
  // 输入正确,且有选中该行复选框才提交 
  function checkShopping(){ 
   $("#msg").html(''); 
   var $checkbox = $("input[name='choice']"); 
   var reg = /^[1-9]\d*$/; 
   var $number = ""; 
   var isInteger = false;//记录数字是否正确 
   var moreOne = false;//选择复选框个数 
   $checkbox.each(function(){ 
    if($(this).is(":checked")){ 
     $number = $(this).parent().prev().children().val(); 
     if(reg.test($number)){ 
      isInteger = true; 
      moreOne = true; 
     }else{ 
      $("#msg").html('提示:输入数量必须为正整数'); 
      isInteger = false; 
     } 
    } 
   }) 
   if(isInteger && moreOne){ 
    return true; 
   }else if(!moreOne){ 
    $("#msg").html('提示:至少选择一条信息'); 
    return false; 
   }else{ 
    return false; 
   } 
  } 
</script>

总结

以上所述是小编给大家介绍的基于JavaScript实现带数据验证和复选框的表单提交,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
详解vue引入子组件方法
Feb 12 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
vue实现文字加密功能
Sep 27 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 #Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 #Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 #Javascript
vue中页面跳转拦截器的实现方法
Aug 23 #Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 #Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 #Javascript
You might like
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
动态调用CSS文件的JS代码
2010/07/29 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
学习python的几条建议分享
2013/02/10 Python
Python日志模块logging简介
2015/04/13 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Python连接mysql方法及常用参数
2020/09/01 Python
如何查看python关键字
2021/01/17 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
初中校园广播稿
2014/02/02 职场文书
个人自我评价范文
2014/02/05 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
民政工作个人总结
2015/02/28 职场文书
创业计划书之校园超市
2019/09/12 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
mysqldump进行数据备份详解
2022/07/15 MySQL