标签:校验 info alert data disabled split order tar creat
使用者只需要在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(); } })();
自己写的一个校验IP、IP掩码、IP段的方法封装到了JQ中,方便了使用者的使用
标签:校验 info alert data disabled split order tar creat
原文地址:https://www.cnblogs.com/wwx875075608/p/9174496.html