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