安全组规则之间是可以相互引用的,也可以自己是自己手动输入的ip/mask,这时候可以加一个功能,实现securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。
主要实现方式是:后台处理securityGroupName和SecurityGroupName的组合列表,并且在前台做相应的处理,处理为数组对象,此时对名称和id的联想基本实现,如果再加上ip/task,只需做一些处理,创建一个新数组,拼接到之前的name和id的数组上,这时候就实现了securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。
主要实现方式是:后台处理securityGroupName和SecurityGroupName的组合列表,并且在前台做相应的处理,处理为数组对象,此时对名称和id的联想基本实现,如果再加上ip/task,只需做一些处理,创建一个新数组,拼接到之前的name和id的数组上,这时候就实现了securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。
以下主要是实现ip/mask的转换,涉及一个最小掩码的算法,比如当前ip是10.12.0.0,这个时候需要计算出最小掩码,算法是:将该ip分段处理,如果第一个数不为0(,此处单纯的理解为10进制,也可以处理成2进制数之后相应的判断),那么查看后一位是否为0,这里以第二位为例(12)。因为第一位10后面的数(12)不为零,第二位12的后面的数(0)为零,则对12处理。12处理成2进制数为:00001100,掩码可最后一个1的位置有关,此时得出的数是6,那么第一位后面不为0,则第一位取全掩8,此时得出的值为8+6=14,也就是说该ip最后取出的最小掩码为14,还有三个是固定的,大家都会(14,16,24,34),如果不是以此往下类推。
/**
* IP自动联想
*
* @param input IP
* @return IP/Task
*/
function getIpArray(input){
var ipArray = input.split('.');
for( var i = 0; i < 4; i++){
if (ipArray[i] == undefined || ipArray[i] == ''){
ipArray[i] = 0;
}
}
return ipArray;
}
function every(arr, func){
var aa = [];
for( var i = 0; i < arr.length; i++){
aa.push(func(arr[i]));
}
return aa;
}
function indexOfEnd(str){
for( var i = str.length - 1; i >= 0; i--){
if (str.charAt(i) == '1') {
return 8 - (str.length - i) + 1;
}
}
return 0;
}
// 接受输入的内容
function getPermissions(input){
var ipArray = getIpArray(input);
var ip = ipArray.join('.');
var binaryIpArray = every(ipArray, function(oct){
return Number(oct).toString(2);
});
var yanma = 0;
for( var i = binaryIpArray.length - 1; i >= 0; i--){
if(binaryIpArray[i] != 0){
yanma = indexOfEnd(binaryIpArray[i]) + i * 8;
break;
}
}
var abc = [ 8, 16, 24, 32 ];
var rstArray = [ ip + '/' + yanma ];
for( var i = 0; i < abc.length; i++){
if(abc[i] > yanma){
rstArray.push(ip + '/' + abc[i]);
}
}
return rstArray;
}
这里主要是在键盘事件触发的时候的一个脚本,实现自动联想
/**
* 创建安全组自动联想DOM
*/
function createSgDom(input){
var arrayObj = new Array();
var ary = new Array();
this.setNewAry([]);
this.setAry([]);
var autoData = jsonData.substring(1, jsonData.length -1).split(', ');
for ( var element in autoData) {
arrayObj.push(autoData[element]);
}
// 此处用到正则表达式判断输入内容是否与IP格式匹配
var permissions = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/;
var ip_1 = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))[\.]?){1,3})$/;
// 此处判断输入内容是否是安全组名称/ID格式的
var str = /^[a-zA-Z]*([a-zA-Z]|[-])*$/;
if(null != input && !str.test(input)){
if(ip_1.test(input) || permissions.test(input)){
var except = false;
if(input.indexOf('.') > -1){
var value = input.split('.');
for(var val in value){
var inVal = value[val];
if(inVal.indexOf('0') == 0 && inVal.length > 1){
except = true;
}
if(inVal>255){
except = true;
}
}
} else {
if(input>255){
except = true;
}
}
if(!except){
var ips = getPermissions(input);
for(var ip in ips){
ary.push(ips[ip]);
}
}
}
}
if(ary != null){
newAry = arrayObj.concat(ary);
} else {
newAry = arrayObj;
}
this.setNewAry(newAry);
$('#suggest_value').autocomplete({
source: this.getNewAry(),
minLength: 0,
close: function(event, ui){
},
focus: function(event, ui){
return false;
},
change: function(event, ui){
},
select: function(event, ui){
if(ui.item.label.indexOf('(') > -1 && ui.item.label.indexOf(')') > -1){
ui.item.value = ui.item.label.substring(0, ui.item.label.indexOf('('));
}else{
ui.item.value = ui.item.label.substring(0, ui.item.label.length);
}
}
});
}
//在输入框加上一个keyup事件,指定执行脚本:createSgDom($('#suggest_value').val());
// 引入自动联想插件和上面处理ip掩码的脚本
<script src="jquery-ui/js/cbms/ip-permissions.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
请支持原创,欢迎纠错,若转载,请注明出处。