JS はデータ検証とチェックボックスフォームの送信を実装します-jsチュートリアル-php.cn

JS はデータ検証とチェックボックスフォームの送信を実装します

php中世界最好的语言

リリース： 2018-04-19 09:14:24

オリジナル

2625 人が閲覧しました

今回は、JS でデータ検証とチェックボックスフォームの送信を実装するための注意事項について、実際のケースを見てみましょう。

実装:

1. ユーザーが少なくとも 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>

ログイン後にコピー

<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>

ログイン後にコピー

この記事を読む方法はもうマスターされたと思います。さらに興味をそそられる場合は、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

カルーセル画像を簡単に実装するためのJS

Vue0.1のコードをVue2.0に追加して使用する方法

WebPack入門チュートリアルの詳細な説明

以上がJS はデータ検証とチェックボックスフォームの送信を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。