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

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

実装:

1. ユーザーが少なくとも 1 つの項目を選択した場合、その行が選択されたことを意味し、その行のデータが検証されてフォームが送信されます。それ以外の場合、フォームは送信されません。

html

nbsp;html> 
 
 
 <meta> 
 <title>带数据验证和复选框的表单提交</title> 
 <script></script> 
 <style> 
  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=&#39;number&#39;]{ 
   width: 100px; 
  } 
 </style> 
 
 
 

                                                                                                                                                    

商品名	单价	购买数量
香蕉	100
苹果	100

       

   

   

js

<script> 
  $(function(){ 
   //全选 
   $("input[name=&#39;both&#39;]").click(function(){ 
    var $isSelected = $(this).is(":checked"); 
    for(var i = 0;i<$("input[name=&#39;choice&#39;]").length;i++){ 
     $("input[name=&#39;choice&#39;]")[i].checked = $isSelected; 
     } 
    }) 
  }); 
  // 输入正确，且有选中该行复选框才提交 
  function checkShopping(){ 
   $("#msg").html(&#39;&#39;); 
   var $checkbox = $("input[name=&#39;choice&#39;]"); 
   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(&#39;提示：输入数量必须为正整数&#39;); 
      isInteger = false; 
     } 
    } 
   }) 
   if(isInteger && moreOne){ 
    return true; 
   }else if(!moreOne){ 
    $("#msg").html(&#39;提示：至少选择一条信息&#39;); 
    return false; 
   }else{ 
    return false; 
   } 
  } 
</script>

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

推奨読書:

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

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

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

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