在写后台时,有时需要 “批量添加列表”,并且提交时判断,列表内容不能为空,例如:
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;
}
}