自己写的一个校验IPIP掩码IP段的方法封装到了JQ中，方便了使用者的使用

Posted 2020-11-17 天马行空的Max

使用者只需要在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;">&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)){  //验证是否是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();
    }
})();