基于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 相关文章推荐
jquery 插件开发方法小结
Oct 23 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 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作的文本留言本的例子(五)
2006/10/09 PHP
人大复印资料处理程序_输入篇
2006/10/09 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
利用Python如何生成随机密码
2016/04/20 Python
Python 将pdf转成图片的方法
2018/04/23 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
C#的几个面试问题
2016/05/22 面试题
卫生巾广告词
2014/03/18 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
小学教师见习总结
2015/06/23 职场文书
创业计划书之面包店
2019/09/17 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记