基于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實現帶數據驗證和復選框的表單提交，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: