今天我要解决用正则表达式实现对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