HTML中将ip地址写成输入，点的形式，将mac地址写成输入，冒号的形式，并进行前后端的数据交互，以及实现一些快捷的操作及输入的限制。(代码封装)

首先去年我写过一篇一模一样的文章，那个时候在初步探索，所以写的代码有点累赘，没有想到封装这个层面，这段时间写的一个页面上有多个ip或多个mac的，用之前的方式要写好多代码，所以我封装了一个函数，在用到的页面调用就好了。

页面前端html页面请看：HTML中将ip地址写成输入，点的形式，将mac地址写成输入，冒号的形式，并进行前后端的数据交互，以及实现一些快捷的操作及输入的限制。_笑到世界都狼狈的博客-CSDN博客

接下来看一下我对js共用部分进行封装函数：

1.新建了一个叫ip_mac_formatEencapsulation.js的js文件，里面写的内容如下：

/**
 * 点击详情页面时ip直接显示时调用
 * @param inputParent四个小input框的父容器div的id或class
 * @param option后台传给前台的ip值，例如${ safety.netmask}或$("#ip").val()
 */
function ipShowDiv(inputParent,option) {
    var resultIp=option.split(".");
    $(inputParent + ">.ip1").val(resultIp[0]);
    $(inputParent + ">.ip2").val(resultIp[1]);
    $(inputParent + ">.ip3").val(resultIp[2]);
    $(inputParent + ">.ip4").val(resultIp[3]);
    console.log('封装option',option)
    console.log('封装$(inputParent + ">.ip1")',$(inputParent + ">.ip1").val())
}


/**
 * 当ip发生变化时调用
 * ip获取值封装
 * @param inputParent四个小input框的父容器div的id
 * @param inputHidden隐藏起来的input的id，用来将四个input中的值合并添加到隐藏input中传给后台
 */
function ipChange(inputParent,inputHidden){
    var ip1,ip2,ip3,ip4;
    // $("#" + inputParent + ">.ip1").val()这样写的话，调用的时候不用参数不用加#，但是父容器必须有id，不是很灵活
    if ($(inputParent + ">.ip1").val() == ''){
        ip1 = '';
    } else {
        ip1 = $(inputParent + ">.ip1").val() + '.';
    }
    if ($(inputParent + ">.ip2").val() == ''){
        ip2 = '';
    } else {
        ip2 = $(inputParent + ">.ip2").val() + '.';
    }
    if ($(inputParent + ">.ip3").val() == ''){
        ip3 = '';
    } else {
        ip3 = $(inputParent + ">.ip3").val() + '.';
    }
    if ($(inputParent + ">.ip4").val() == ''){
        ip4 = '';
    } else {
        ip4 = $(inputParent + ">.ip4").val();
    }
    var ipp = ip1 + ip2 + ip3 + ip4;
    $(inputHidden).val(ipp);
    console.log('封装ipp',ipp);
    console.log("封装$(inputHidden).val()", $(inputHidden).val())
}
// ipShowDiv("#ipVal","${ safety.ip}");
// ipChange("#ipVal","#netmask");
/**
 * 点击详情页面时mac直接显示时调用
 * @param inputParent六个小input框的父容器div的id或class
 * @param option后台传给前台的ip值，例如${ safety.netmask}或$("#mac").val()
 */
function macShowDiv(inputParent,option) {
    var resultMac=option.split(":");
    $(inputParent + ">.mac1").val(resultMac[0]);
    $(inputParent + ">.mac2").val(resultMac[1]);
    $(inputParent + ">.mac3").val(resultMac[2]);
    $(inputParent + ">.mac4").val(resultMac[3]);
    $(inputParent + ">.mac5").val(resultMac[4]);
    $(inputParent + ">.mac6").val(resultMac[5]);
    console.log('封装mac--option',option)
    console.log('封装mac--$(inputParent + ">.ip1")',$(inputParent + ">.ip1").val())
}
/**
 * 当mac发生变化时调用
 * mac获取值封装
 * @param inputParent六个小input框的父容器div的id
 * @param inputHidden隐藏起来的input的id，用来将四个input中的值合并添加到隐藏input中传给后台
 */
function macChange(inputParent,inputHidden){
    var mac1,mac2,mac3,mac4,mac5,mac6;
    if ($(inputParent + ">.mac1").val() == ''){
        mac1 = '';
    } else {
        mac1 = $(inputParent + ">.mac1").val() + ':';
    }
    if ($(inputParent + ">.mac2").val() == ''){
        mac2 = '';
    } else {
        mac2 = $(inputParent + ">.mac2").val() + ':';
    }
    if ($(inputParent + ">.mac3").val() == ''){
        mac3 = '';
    } else{
        mac3 = $(inputParent + ">.mac3").val() + ':';
    }

    if ($(inputParent + ">.mac4").val() == ''){
        mac4 = '';
    } else {
        mac4 = $(inputParent + ">.mac4").val() + ':';
    }
    if ($(inputParent + ">.mac5").val() == ''){
        mac5 = '';
    } else {
        mac5 = $(inputParent + ">.mac5").val() + ':';
    }
    if ($(inputParent + ">.mac6").val() == ''){
        mac6 = '';
    } else{
        mac6 = $(inputParent + ">.mac6").val();
    }
    var macc = mac1+ mac2 + mac3 + mac4 + mac5 + mac6;
    $(inputHidden).val(macc);
    console.log('封装mac',macc);
    console.log("封装nac--$(inputHidden).val()", $(inputHidden).val())
}

2.在要用的页面调用：

2.1在html或jsp页面导入刚刚新建的js页面（要确保导入js文件在函数调用的上方）

调用ip显示/回显：

ipShowDiv("#ipVal","${ safety.netmask}");
// ipShowDiv("#ipVal",$("#ip").val());
// 上述"#ipVal"指的是包裹四个input的div的id,当然如果你是class，可以通过".ipVal"调用即可；
// 后面的"${ safety.netmask}"/$("#ip").val()是你能拿到要显示在4个input的ip值

修改ip，既ip发生变化时要传给后台时，获取ip的值：

ipChange("#ipVal","#ip");
// 上述"#ipVal"指的是包裹四个input的div的id,当然如果你是class，可以通过".ipVal"调用即可；
// 后面的"#ip"是你写在div以为的一个隐藏的input，用于将拼接好的数据传给input,在传给后台

至于mac的调用，和ip是一样的，调用对应函数就好了。。。