批量添加列表,并进行判断

来源:互联网 发布:淘宝宝贝照片拍摄 编辑:程序博客网 时间:2024/06/16 16:21

在写后台时,有时需要 “批量添加列表”,并且提交时判断,列表内容不能为空,例如:
示例


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;  }}