JS實作資料驗證與複選框表單提交
- php中世界最好的语言原創
- 2018-04-19 09:14:242663瀏覽
這次帶給大家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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：vue.js雙向綁定使用詳解下一篇：vue.js雙向綁定使用詳解