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

来源：懂视网责编：小采时间：2020-11-27 22:32:01

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

基于JavaScript实现带数据验证和复选框的表单提交:实现： 1.用户至少选中某项，即表示选中该行，同时该行的数据验证通过，表单提交；否则，不提交。 html <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>带数据验

推荐度：

点击下载本文 文档为doc格式

导读基于JavaScript实现带数据验证和复选框的表单提交:实现： 1.用户至少选中某项，即表示选中该行，同时该行的数据验证通过，表单提交；否则，不提交。 html <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>带数据验

实现：

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

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

推荐度：

点击下载本文 文档为doc格式

标签：实现基于javascript 基于javascript实现带数据验证和复选框的表单提交

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐