正则表达式实现对IP/子网掩码/网关的验证

今天我要解决用正则表达式实现对IP/子网掩码/网关的验证，遇到了一些小问题，记录一下。

 先是用了一个笨办法，直接把三个函数列出来，第一个函数check（验证IP地址），把#ipp（IP输入框的ID）value传进函数，然后验证，取反就报错，报错用的是LAYUI中的layer.tips，然后else就是验证成功，接下来就是check1（验证子网掩码），check1也是一样的道理，在else里面又把check2（验证网关）放进来。

实现的就是，先验证IP，失败就报错，成功就进入子网掩码验证，失败就报错，成功就进入网关验证，失败就报错，成功就结束。

function check() {
    let ipp = $("#ipp").val();  

    let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\. 
     (\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
    if (!reg.test(ipp)) {
     
        layer.tips("IP地址格式错误!", "#ipp", {tips: [2, "#ff4d4d"]})
        return;
    } else {

        check1()


    }
}


function check1() {
    let num = $("#ipa").val();
    let reg = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/;
    if (!reg.test(num)) {
        layer.tips("子网掩码格式错误!", "#ipa", {tips: [2, "#ff4d4d"]})
        return
    } else {

        check2()
    }

}


function check2() {

    let ipc = $("#ipc").val();

    let reg = /^(192\.168(\.(\d|([1-9]\d)|(1\d{2})|(2[0-4]\d)|(25[0-5]))){2})$/;

    if (!reg.test(ipc)) {
        layer.tips("网关格式错误!", "#ipc", {tips: [2, "#ff4d4d"]})
        return
    }


}

实现的效果就是这样：

---

因为我要实现两个一模一样的的分页，所以如果我把代码全部复制粘贴改输入框的ID，会很麻烦，代码也会很长很乱，所以我新建了一个check的JS文件，用来存放三种检测方法：

//ip校验
function ipCheck(value){
    let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
    let result = reg.test(value);
    return result;
}

//子网掩码校验

function maskCheck(value){
    let reg = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/;
    let result = reg.test(value);
    return result;
}

//网关校验

function gateCheck(value){
    let reg = /^(192\.168(\.(\d|([1-9]\d)|(1\d{2})|(2[0-4]\d)|(25[0-5]))){2})$/;
    let result = reg.test(value);
    return result;
}

然后在项目关键JS里面调用这三种方法，代码如下： 

       

function check() {
    if (!ipCheck($("#ipp").val())) {
        layer.tips("IP地址输入错误!", "#ipp", {tips: [2, "#ff4d4d"]})
        return;
    }

    if (!maskCheck($("#ipa").val())) {
        layer.tips("子网掩码输入错误!", "#ipa", {tips: [2, "#ff4d4d"]})
        return;
    }

    if (!gateCheck($("#ipc").val())) {
        layer.tips("网关格式输入错误!", "#ipc", {tips: [2, "#ff4d4d"]})
        return;
    }
}

这样我只要再复制一段，修改每个文本框的ID就可以实现了，项目内的关键JS也不会显得很乱。实现的效果和上面GIF是没有区别的。

注意：以上正则表达式是不够准确的，能做到大致验证，但是无法满足专业的需求，我看到一篇写的比较全面的的验证博客，有需求可以看一下：https://blog.csdn.net/xuw_xy/article/details/119151832