<div id="IP"></div>

(function() {var ipInputer = function (ele) {this.$element = ele;}ipInputer.prototype = {Init: function() {var tample = '<div class="modal-border">'+'<div class="tip tipstxt"><div class="inner"></div><div style="margin:4px;">&nbspIP格式:1.1.1.1</br>&nbspIP段格式:1.1.1.1-2.2.2.2</br>&nbspIP掩码格式:1.1.1.1/32</div></div>'+'<div class="modal-body-item col-md-12">'+'<div class="col-md-12 input-group">'+'<input type="text" class="ip-input form-control"  placeholder="请输入合法IP">'+'<i class="fa fa-info tips" style="color:blue"></i>'+'<span class="input-group-btn">'+'<button class="btn btn-default ip-input-add-button btn_right">添加</button>'+'</span>'+'</div>'+'<div class="ip-list" class="col-md-12 input-group">'+'</div>'+'</div>'+'<div class="modal-body-item col-md-12">'+'<div class="col-md-12">'+'已输入的IP总个数为<span class="ip-number">0</span>'+'</div>'+'</div>'+'</div>';var ipNum=0;var ip_patrn =/^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)$/;   var ip_mask = /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))\/(([0-9])|([1-2][0-9])|([3][0-2]))$/;this.$element.html(tample);function CreatDom(e){var ip = e.data.$element.find(".ip-input").val();var oldipNum=e.data.$element.attr("ipunm");if(oldipNum==undefined){oldipNum=0;}oldipNum=oldipNum*1;if(ip!=""){if(ip.indexOf("-")!=-1){var ipOrigan=ip;ip=ip.split("-");if(ip_patrn.test(ip[0])&&ip_patrn.test(ip[1])){  //先验证是否是IP  在验证是否是正确的IP段  再计算IP数量var start = ip[0].split('.');  var end = ip[1].split('.');var start_ip=start[0] * 256 * 256 * 256 + start[1] * 256 * 256 + start[2] * 256 + start[3]*1;var end_ip=end[0] * 256 * 256 * 256 + end[1] * 256 * 256 + end[2] * 256 + end[3]*1;if((end_ip - start_ip)>0){ipNum=end_ip - start_ip+1+oldipNum;if(ipNum<=4278124287){e.data.$element.find(".ip-list").append(`<div class="input-group"><input type="text" class="form-control" placeholder="" value="${ipOrigan}" class="addIpShow" ipunm=${end_ip - start_ip+1} disabled> <span class="input-group-btn"><button class="btn btn-default ipdelete btn_right">删除</button></span></div>`);e.data.$element.attr("ipunm",ipNum)e.data.$element.find('.ip-number').text(ipNum)e.data.$element.find(".ip-input").val("")}else{alert('超过最大ip数量')return false;}        }else{e.data.$element.find(".ip-input").val(ipOrigan);alert('前后IP大小输入有误');return false;}}else{e.data.$element.find(".ip-input").val(ip);alert('请检查IP段格式');return false;}}else if(ip.indexOf("/")!=-1){   //验证是否是正确的IP掩码  在计算数量if(ip_mask.test(ip)){var p=32-ip.slice(ip.indexOf("/")+1)var pnum=1;while(p){pnum=2*pnum;p--;}ipNum=oldipNum+pnum;if(ipNum<=4278124287){e.data.$element.find(".ip-list").append(`<div class="input-group"><input type="text" name=""  class="form-control" placeholder="" value="${ip}" class="addIpShow" ipunm=${pnum} disabled> <span class="input-group-btn"><button class="btn btn-default ipdelete btn_right">删除</button></div>`)e.data.$element.attr("ipunm",ipNum)e.data.$element.find('.ip-number').text(ipNum)e.data.$element.find('.ip-input').val("")}else{alert('超过最大ip数量')return false;}}else{e.data.$element.find('.ip-input').val(ip)alert('请检查IP掩码格式')return false;}}else{if(!ip_patrn.test(ip)){  //验证是否是IPalert("请检查IP格式");return false;}ipNum=oldipNum+1if(ipNum<=4278124287){e.data.$element.find(".ip-list").append(`<div class="input-group"><input type="text" name=""   class="form-control" placeholder="" value="${ip}" class="addIpShow" ipunm=1 disabled> <span class="input-group-btn"><button class="btn btn-default ipdelete btn_right">删除</button></div>`)e.data.$element.attr("ipunm",ipNum)e.data.$element.find('.ip-number').text(ipNum)e.data.$element.find('.ip-input').val("")}else{alert('超过最大ip数量')return false;}}}else{alert("请输入");return false;}  }this.$element.off();this.$element.on("click",".ip-input-add-button",this,function(e){e.stopPropagation()   CreatDom(e)  });   this.$element.on("mouseover",".tips",this,function(e){  e.data.$element.find('.tipstxt').css("display","block")});   this.$element.on("mouseleave",".tips",this,function(e){  e.data.$element.find('.tipstxt').css("display","none")});   this.$element.on("click",".ipdelete",this,function(e){ipNum=e.data.$element.attr("ipunm")-$(this).parent().parent().children(":nth-child(1)").attr("ipunm");$(this).parent().parent().remove();e.data.$element.find('.ip-number').text(ipNum)e.data.$element.attr("ipunm",ipNum)})this.$element.on("keydown",".ip-input",this,function(e){e.stopPropagation() if(e.which==13){CreatDom(e)}})},Remove:function(){this.$element.off();this.$element.empty();this.$element.attr("ipunm",0)},}$.fn.ipInput = function() {//创建Beautifier的实体var ipInput = new ipInputer(this);//调用其方法return ipInput;// return ipInput.Init();
    }
})();