這次帶給大家JS實作資料驗證與複選框表單提交,JS實現資料驗證與複選框表單提交的注意事項有哪些,以下就是實戰案例,一起來看一下。
實作:
# 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>
了本文案例時你已掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是JS實作資料驗證與複選框表單提交的詳細內容。更多資訊請關注PHP中文網其他相關文章!