ElementUi配置自定义校验规则-校验IP和IP段

简介: ElementUi配置自定义校验规则-校验IP和IP段
data() {
  const isValidIp = (rule, value, callback) => { // 校验IP是否符合规则
    var regEx = /,/g
    var ipList = value.toString().replace(regEx, ',').split(',')
    var 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])$/
    for (var i in ipList) {
      if (!reg.test(ipList[i])) {
        return callback(new Error('请输入节点ip地址,多节点用,分隔'))
      } else {
        callback()
      }
    }
    return true
  }
  return {
    form: {
      name: '',
      accCode: '',
      ip: '',
      nodeIp: ''
    },
    accList: [],
    rules: {
      name: [{ required: true, message: '请输入', trigger: 'blur' }],
      accCode: [{ required: true, message: '请选择', trigger: 'blur' }],
      ip: [{ required: true, message: '请输入', trigger: 'blur' }],
      nodeIp: [{ required: true, validator: isValidIp, message: '请输入', trigger: 'blur' }]
    }
  }
},
import { isValidIp } from '../../../utils/validate'
const validIp = (rule, value, callback) => {
      // 校验IP是否符合规则
      if (!isValidIp(value) {
        return callback(new Error('请输入节点ip地址,多节点用,分隔'))
      }else {
        callback()
      }
    }
/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isValidIp(arg) {
  var regEx = /,/g
  var ipList = arg.toString().replace(regEx, ',').split(',')
  var 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])$/
  for (var i in ipList) {
    if (!reg.test(ipList[i])) {
      return false
    }else {
        callback()
      }
  }
  return true
}

同时校验IP和IP段

function isValidIp(arg) {
  var regEx = /,/g
  var ipList = arg.toString().replace(regEx, ',').split(',')
  var 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])$/
  var pattern = /^(\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])\/(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
  for (var i in ipList) {
    if (!reg.test(ipList[i]) && !pattern.test(ipList[i])) {
      return false
    }else {
        callback()
      }
  }
  return true
}
相关文章
|
Java API Nacos
找不到`com.alibaba.nacos.api.utils.NetUtils`类
找不到`com.alibaba.nacos.api.utils.NetUtils`类
801 0
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
9506 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
移动开发 JavaScript 安全
js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结
js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结
839 0
|
安全 数据库 网络架构
局域网与广域网:连接世界的两张网
【10月更文挑战第10天】
3409 0
|
存储 数据库 数据库管理
SQLite支持哪些数据类型?
【7月更文挑战第31天】SQLite支持哪些数据类型?
1364 8
Ant design组件库里面的Dropdown怎么写点击事件?
Ant design组件库里面的Dropdown怎么写点击事件?
|
Oracle 关系型数据库 MySQL
实时计算 Flink版操作报错合集之遇到报错ORA-01435用户不存在的问题,该如何解决
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
1054 0
 ECharts 雷达图案例001-自定义节点动画
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
383 0
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
653 0