实现一个输入框多个ip以逗号分隔最多20组,且ip不能重复

// 非必填项 多个 IP地址校验正则函数

var validatorIp = (rule, value, callback) => {

// multicast_type为0 '任意源'时 没有信源IP校验,跳过所有IP校验

if (this.form.multicast_type === 0) {

return callback();

}

// multicast_type不为0时,开始执行IP校验逻辑

if (!value) {

return callback('信源IP不能为空');

}

// 定义IPv4地址的正则校验规则

const ipRegex = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;

// 按逗号分割IP组,同时去除每组首尾空格

const ipGroups = value.split(',').map(ip => ip.trim());

// 校验IP组数量,最多20组

if (ipGroups.length > 20) {

return callback(new Error('最多支持20组IP地址'));

}

// 检查是否有空值分组

if (ipGroups.some(ip => !ip)) {

// return callback(new Error('请输入正确的IP地址,多个IP用逗号","分隔'));

return callback(new Error('IP地址分组不能为空'));

}

// 通过Set去重判断是否存在重复IP

/* const uniqueIps = new Set(ipGroups);

if (uniqueIps.size !== ipGroups.length) {

return callback(new Error('IP地址不能重复'));

} */

const validIps = [];// 有效的IP地址

const duplicateIps = [];// 重复的ip

const seenIps = new Set();// 创建一个Set数据结构来跟踪已经处理过的IP地址

// 遍历校验每个IP的格式合法性

for (const ip of ipGroups) {

if (!ipRegex.test(ip)) {

return callback(new Error('请输入正确的IP地址,多个IP用逗号","分隔'));

}

// 禁止输入0.0.0.0和255.255.255.255

if (ip === '0.0.0.0' || ip === '255.255.255.255') {

return callback(new Error('不允许输入0.0.0.0和255.255.255.255等特殊IP'));

}

// 检查重复

if (seenIps.has(ip)) {

duplicateIps.push(ip);

} else {

seenIps.add(ip);

validIps.push(ip);

}

}

if (duplicateIps.length > 0) {

return callback(`发现重复IP地址: ${[...new Set(duplicateIps)].join(', ')}`);

}

// 校验通过

return callback();

};

相关推荐
似水流年QC1 天前
Chrome Performance 面板前端性能分析从入门到实战
前端·chrome
君穆南1 天前
docker里面的minio的备份方法
前端
Thomas21431 天前
--remote-debugging-port=9222 和 chrome://inspect/#remote-debugging 区别
前端·chrome
Luna-player1 天前
二本生找前端工作
前端
han_hanker1 天前
Spring Boot 如何读取 application.yml 作为配置
java·spring boot·后端
Milu_Jingyu1 天前
sqlite3_prepare_v2 与 sqlite3_exec 在 SQLite 中的核心区别
java·数据库·sqlite
M ? A1 天前
Vue3 转 React 工具 VuReact v1.6.0 更新:useAttrs 完美兼容,修复模板迁移 / 类型错误
前端·javascript·vue.js·react.js·开源·vureact
计算机学姐1 天前
基于SpringBoot的充电桩预约管理系统【阶梯电费+个性化推荐+数据可视化】
java·vue.js·spring boot·后端·mysql·信息可视化·mybatis
低保和光头哪个先来1 天前
解决 ios 使用 video 全屏未铺满页面问题
前端·javascript·vue.js·ios·前端框架
MacroZheng1 天前
全面升级!看看人家的后台管理系统,确实清新优雅!
前端·vue.js·typescript