基于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 相关文章推荐
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 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
php中fgetcsv()函数用法实例
2014/11/28 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python django生成迁移文件的实例
2019/08/31 Python
python自动生成model文件过程详解
2019/11/02 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
会计助理的岗位职责
2013/11/29 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android