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

2019-11-19 15:42:32

字体：大中小

来源：转载

供稿：网友

实现：

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

上一篇：Vue中定义全局变量与常量的各种方式详解

下一篇：使用JS组件实现带ToolTip验证框的实例代码