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

实现：

1.用户至少选中某项，即表示选中该行，同时该行的数据验证通过，表单提交；否则，不提交。

html

 
 
 
  
  
 <script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"></script> 
  
 
 
 
 
   
    
     
     商品名 
     单价 
     购买数量 
      
     
    
    
     
     香蕉 
     100 
      
      
       
      
     
     
     苹果 
     100 
      
      
       
      
     
    
   
   
 
 
 
 
 

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>

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

http://m.bbyears.com/jiaocheng/135391.html

推荐访问: