基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復選框的表單提交
更新時間：2017年08月23日 09:24:41 作者：夢很想家
這篇文章主要介紹了基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復選框的表單提交功能,需要的朋友可以參考下
實現(xiàn)：
1.用戶至少選中某項，即表示選中該行，同時該行的數(shù)據(jù)驗證通過，表單提交；否則，不提交。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>帶數(shù)據(jù)驗證和復選框的表單提交</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>購買數(shù)量</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="請輸入數(shù)量"></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="請輸入數(shù)量"></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;//記錄數(shù)字是否正確
var moreOne = false;//選擇復選框個數(shù)
$checkbox.each(function(){
if($(this).is(":checked")){
$number = $(this).parent().prev().children().val();
if(reg.test($number)){
isInteger = true;
moreOne = true;
}else{
$("#msg").html('提示：輸入數(shù)量必須為正整數(shù)');
isInteger = false;
}
}
})
if(isInteger && moreOne){
return true;
}else if(!moreOne){
$("#msg").html('提示：至少選擇一條信息');
return false;
}else{
return false;
}
}
</script>
總結
以上所述是小編給大家介紹的基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復選框的表單提交，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了JS Thunk 函數(shù)的含義和用法,結合實例形式總結分析了JS Thunk 函數(shù)的具體含義、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)授權登錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
下面小編就為大家分享一篇基于js 各種排序方法和sort方法的區(qū)別(詳解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
在網(wǎng)上找了很多dom操作的例子，感覺不全而且凌亂。2010-04-04
工作中經(jīng)常會使用到判斷一個字符串是否包含某一個字符串，因此總結一下幾個方法,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了原生js+css調節(jié)音量滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
processOnServer使您可以指定當前Button應該處理客戶端的事件或服務器端事件。2009-06-06
一些常用的JavaScript函數(shù)(json)附詳細說明
一些常用的JavaScript函數(shù)(json)附詳細說明,學習js的朋友可以參考下。2011-05-05
D3.js中data(), enter() 和 exit()的問題詳解
相信大多數(shù)人對D3.js并不陌生。這是一個由紐約時報可視化編輯 Mike Bostock與他斯坦福的教授和同學合作開發(fā)的數(shù)據(jù)文件處理的JavaScript Library，全稱叫做Data-Driven Documents，在d3.js中data(), enter() 和 exit()比較常見，下面給大家就這方面的知識給大家詳解2015-08-08
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)計時器開始和結束功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07