在寫後臺時,有時需要 “批量添加列表”,並且提交時判斷,列表內容不能爲空,例如:
html:
<div class="itemDiv" style="margin-bottom: 10px;">
<p>
<label for="itemLists">道具列表</label>
<select name="itemLists" id="itemLists" style="margin-left: 15px;">
<option value="item">道具</option>
<option value="equipment">裝備</option>
</select>
</p>
<p>
<label for="itemID">道具ID</label>
<input type="text" name="itemID" class="itemID" id="itemID" style="margin-left: 28px;">
</p>
<p>
<label for="itemNumbers">道具數量</label>
<input type="text" name="itemNumbers" class="itemNumbers" id="itemNumbers" style="margin-left: 15px;">
</p>
</div>
<p id="addP" style="margin-top: 10px;">
<button type="button" id="addItemBtn">添加獎品</button>
</p>
前端js 添加獎品 功能:
// 添加獎品 功能
var addCount = 1;
$(document).ready(
$('#addItemBtn').click(function () {
addCount++;
if ( addCount > 4 ) {
alert('不能超過4個!');
return false;
} else {
var $itemDiv =
'<div class="itemDiv" style="margin-bottom: 10px;">' +
'<p>' +
'<label for="itemLists">道具列表</label>' +
'<select name="itemLists" id="itemLists" style="margin-left: 15px;">' +
'<option value="item">道具</option>' +
'<option value="equipment">裝備</option>' +
'</select>' +
'</p>' +
'<p>' +
'<label for="itemID">道具ID</label>' +
'<input type="text" name="itemID" class="itemID" id="itemID" style="margin-left: 28px;">' +
'</p>' +
'<p>' +
'<label for="itemNumbers">道具數量</label>' +
'<input type="text" name="itemNumbers" class="itemNumbers" id="itemNumbers" style="margin-left: 15px;">' +
'</p>' +
'</div>';
$('#addP').before($itemDiv);
}
})
);
前端js判斷:
// 當 道具DIV 不是1個的時候,進行判斷
if ( $('.itemID').length > 1 ) {
// 批量 添加道具 判斷是否爲空
var isItemIDNull = true; // 加個 第三方
$('.itemID').each(function () {
if (!$(this).val()) {
isItemIDNull = false;
alert('道具ID不能爲空!');
return false;
}
});
var isItemNumbersNull = true;
$('.itemNumbers').each(function () {
if (isItemIDNull) { // 如果 ID 通過驗證了,再驗證下面;否則會彈出2次提示!
if (!$(this).val()) {
isItemNumbersNull = false;
alert('道具數量不能爲空!');
return false;
}
}
});
if (isItemIDNull == false || isItemNumbersNull == false) { // 最終給 click事件,返回一個結果
return false;
}
}