使用者只需要在js中调用方法并传入一个ID即可生成验证工具 $("#IP").ipInput().Init();
<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;"> IP格式:1.1.1.1</br> IP段格式:1.1.1.1-2.2.2.2</br> IP掩码格式: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)){ //验证是否是IP
alert("请检查IP格式");
return false;
}
ipNum=oldipNum+1
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=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();
}
})();
原文地址：https://www.cnblogs.com/wwx875075608/p/9174496.html
时间： 2024-10-12 14:03:24