Js對ip段進行校驗

<style  scoped>
.main {
  background-color: transparent;
}
.ip_name {
  position: relative;
  top: 1.5rem;
  left: 1rem;
}
.item {
  font-size: 1rem;
  font-family: "PingFang";
  color: rgba(35, 35, 35, 1);
  margin-bottom: 1rem;
}
.ip_button {
  position: relative;
}
.el-form-item {
  font-family: "PingFang";
  font-size: 1rem;
}
.footer {
  text-align: center;
  margin: 4rem 0 3rem 0;
}
</style>
<template>
  <div class="main">
    <div class="ip_name">
      <div class="item">
        <span>IP區間：</span>
        <span class="ip_button">
          <el-button round size="mini" @click="addIprangeList">添加IP區間</el-button>
        </span>
      </div>
      <el-form ref="idRangeForm" :model="org_params" :inline="true" label-width="90px">
        <el-form-item
          v-for="(item, index) in org_params.ipRangeList"
          :key="index"
          label-width="90px"
          :prop="'ipRangeList.' + index + '.ipRange'"
          :rules="{require: true, validator: checkIpRange, trigger: 'blur'}"
        >
          <el-input v-model="item.ipRange" style="width:23rem;">
            <i slot="suffix" class="el-icon-close" @click="deleteIPrangeList(item, index)" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button type="primary" round @click="savaIp">確定</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      org_params: {
        ipRangeList: [],
      },
    };
  },
  methods: {
    checkIp(rule, value, callback) {
      let reg = /^(?:(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:1[0-9][0-9]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:2[0-4][0-9])|(?:25[0-5])|(?:1[0-9][0-9])|(?:[1-9][0-9])|(?:[0-9]))$/;
      let re = new RegExp(reg);
      if (re.test(value)) {
        callback();
      } else {
        callback(new Error("請填寫正確的IP地址！"));
      }
    },
    checkIpRange(rule, value, callback) {
      let reg = /^(?:(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:1[0-9][0-9]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:2[0-4][0-9])|(?:25[0-5])|(?:1[0-9][0-9])|(?:[1-9][0-9])|(?:[0-9]))$/;
      let re = new RegExp(reg);
      if (!value) {
        callback(new Error("請填寫IP區間內容！"));
        return;
      }
      let arr = value.split("-");
      if (!re.test(arr[0])) {
        callback(new Error("請填寫正確的IP起始地址！"));
        return;
      }
      if (!re.test(arr[1])) {
        callback(new Error("請填寫正確的IP結束地址！"));
        return;
      }
      if (arr.length !== 2 || !this.compareIp(arr[0], arr[1])) {
        callback(new Error("請填寫正確的IP區間范圍！"));
        return;
      }
      callback();
    },
    compareIp(start, end) {
      let status = false;
      let startArr = start.split(".");
      let endArr = end.split(".");
      for (let i = 0; i < startArr.length; i++) {
        const startItem = startArr[i];
        const endItem = endArr[i];
        if (parseInt(endItem) > parseInt(startItem)) {
          status = true;
          break;
        } else if (parseInt(endItem) < parseInt(startItem)) {
          status = false;
          break;
        }
      }
      return status;
    },
    savaIp() {
      this.$refs["idRangeForm"].validate((valid1) => {
        if (valid1) {
          this.$message({
            type: "success",
            message: "修改組織信息成功",
          });
        }
      });
    },
    addIprangeList() {
      this.org_params.ipRangeList.push({
        ipRange: undefined,
      });
    },
    deleteIPrangeList(item, index) {
      this.org_params.ipRangeList.splice(index, 1);
    },
  },
};
</script>