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

更新时间：2017年08月23日 09:24:41 作者：梦很想家

这篇文章主要介绍了基于JavaScript实现带数据验证和复选框的表单提交功能,需要的朋友可以参考下

实现：

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实现带数据验证和复选框的表单提交，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

原生JS实现图片网格式渐显、渐隐效果
这篇文章主要介绍了原生JS实现图片网格式渐显、渐隐效果,需要的朋友可以参考下
2017-06-06
如何在uni-app使用微软的文字转语音服务
有了语音识别,交流就会变得很简单,下面这篇文章主要给大家介绍了关于如何在uni-app使用微软的文字转语音服务的相关资料,需要的朋友可以参考下
2022-06-06
Canvas实现动态的雪花效果
本文主要分享Canvas实现动态的雪花效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
Javascript实现真实字符串剩余字数提示的实例代码
这篇文章介绍了Javascript实现真实字符串剩余字数提示的实例代码，有需要的朋友可以参考一下
2013-10-10
js模拟淘宝网的多级选择菜单实现方法
这篇文章主要介绍了js模拟淘宝网的多级选择菜单实现方法,涉及javascript针对页面元素结点的遍历与设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
JS栈stack类的实现与使用方法示例
这篇文章主要介绍了JS栈stack类的实现与使用方法,结合实例形式分析了栈的原理,以及javascript定义与使用栈的基本操作技巧,需要的朋友可以参考下
2019-01-01
bootstrap 下拉多选框进行多选传值问题代码分析
项目开发遇到个问题，就是引入bootstrap下拉多选框进行多选的时候，用form表单提交到后台，获取不到多选的值，只能获取的选择的第一个值，怎么回事呢？下面小编给大家分析下bootstrap 下拉多选框进行多选传值问题，一起看看吧
2017-02-02
Openlayers实现地图的基本操作
这篇文章主要为大家详细介绍了Openlayers实现地图的基本操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
sso跨域写cookie的一段js脚本(推荐)
下面小编就为大家带来一篇sso跨域写cookie的一段js脚本(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
js表单序列化判断空值的实例
下面小编就为大家带来一篇js表单序列化判断空值的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09