正则校验的多种方式

1.IP地址:端口

let ipReg=/^(\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])\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/

2.IP地址

let ipReg =  /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$/

3.网址,以http或https协议开头

let httpReg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/

4.统一社会信用代码格式

let httpReg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g

5.邮箱

let emailReg=/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/

6.手机号

let phoneReg= /^[1][3,4,5,6,7,8,9][0-9]{9}$/

7.统一社会信用代码

unifiedSocialCreditCode: [

                    {

                        required: true,

                        message: "请输入统一社会信用代码",

                        trigger: "blur",

                    },

                    {

                        pattern: /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g,

                        message: "请输入正确的统一社会信用代码",

                        trigger: "blur",

                    },

                ],

8.邮政编码

//部分地区支持以0开头的

postalCode: [

                    {

                        required: true,

                        message: "请输入邮政编码",

                        trigger: "blur",

                    },

                    {

                        pattern: /^[0-9]{6}$/,

                        message: "请输入正确的邮政编码",

                        trigger: "blur",

                    },

                ],

9.办公电话

officePhone: [

                    {

                        pattern: /^((0\d{2,3})-)?(\d{7,8})$/,

                        message: "请输入正确的办公电话",

                        trigger: "blur",

                    },

                ],

涉及多选的

  {

            type: 'array',

            required: true,

            message: '请至少选择一个数据要素服务商',

            trigger: 'change',

          },

校验的几种写法

1.直接在绑定的form表单中rules中定义

rules:{
  contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
          { max: 64, message: '长度在 64 个字符内', trigger: 'blur' },
        ],
}

2.利用pattern实现正则的验证

email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            required: true,
            pattern:
              /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
            message: '请输入正确的邮箱格式',
            trigger: 'blur',
          },
        ],

3.涉及数字范围的验证

涉及的input中的数据类型要进行转换
input输入的内容都是字符串的形式
v-model.number=""  //转换为数字

 port: [
          {
            required: blur,
            type: 'number',
            min: 1,
            max: 65535,
            message: '请输入范围之内的端口',
          },
        ],

4.利用validator方法实现校验

  const validateCode = (rule, value, callback) => {
      let httpReg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g
      if (value !== '') {
        if (!httpReg.test(value)) {
          callback(new Error('统一社会信用代码格式不正确'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入统一社会信用代码'))
      }
    }


   rules:{
      uscc: [
          { required: true, validator: validateCode, trigger: 'blur' },
        ],
   }

校验DNS服务器地址

100.125.0.28,100.125.0.2 ,输入形式:多个地址以,隔开

 const checkIp = (rule, value, callback) => {

      // console.log(value, '输入的ip')

      let checkIp4 =

        /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/

      let valdata = value.split(/[,;\s]+/g)

      // console.log(valdata)

      let isCorrect = true

      if (valdata.length) {

        for (let i = 0; i < valdata.length; i++) {

          if (checkIp4.test(valdata[i]) == false) {

            isCorrect = false

          }

        }

      }

      if (value == null || value == '' || value == 'undefined') {

        return callback('请输入ip')

      } else if (!isCorrect) {

        callback(new Error('请输入正确的ip地址'))

      } else {

        callback()

      }

    }

/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}


/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true
  }
  return false
}

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function ipaddress(IP) {
  let partten = /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$/
  if (IP && !partten.test(IP)) {
    return false
  }
  return true
}

校验扫描IP的范围

 <el-form-item label="扫描IP地址范围" prop="detectIpClone">
        <div class="tagBox">
          <div
            class="tag"
            v-for="(item, index) in form.detectIpClone"
            :key="index"
          >
            网段:
            <el-form-item
              class="ml2"
              :prop="'detectIpClone.' + index + '.startIp'"
              :rules="rules.startIp"
            >
              <el-input
                placeholder="请输入起始IP"
                style="width: 150px"
                v-model="item.startIp"
              ></el-input>
            </el-form-item>
            <span class="line">--</span>
            <el-form-item
              :prop="'detectIpClone.' + index + '.endIp'"
              :rules="rules.endIp"
            >
              <el-input
                placeholder="请输入结束IP"
                style="width: 150px"
                v-model="item.endIp"
              ></el-input>
            </el-form-item>
            <p
              class="ml2"
              v-if="mode != 'info'"
              style="font-size: 14px; cursor: pointer"
              @click="deleteFormTag('detectIpClone', index)"
            >
              <el-icon><DeleteFilled /></el-icon>
            </p>
          </div>
          <p>
            <span
              class="ml2"
              style="font-size: 14px; cursor: pointer"
              v-if="mode != 'info'"
              @click="addFormTag('detectIpClone')"
              ><el-icon><CirclePlusFilled /></el-icon>&nbsp;添加范围</span
            >
          </p>
        </div>
      </el-form-item>

规则对应部分

startIp: [

          {

            required: true,

            trigger: "blur",

            message: "请输入起始IP",

          },

          {

            pattern:

              /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$/,

            message: "请输入正确的IP格式",

            trigger: "blur",

          },

        ],

        endIp: [

          {

            required: true,

            trigger: "blur",

            message: "请输入结束IP",

          },

          {

            validator: this.validatorEndIP,

            trigger: "blur",

          },

        ],

对应正则

  validatorEndIP(rule, value, callback) {
      let curIP = rule.field.split(".")[1];
      let reg =
        /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$/;
      if (value == null || value == "" || value == "undefined") {
        callback("请输入结束IP");
      }
      if (reg.test(value)) {
        //比对结束IP不能小于开始IP
        if (this.form.detectIpClone[curIP].startIp == value) {
          callback("结束IP不能和开始IP一致!");
        }
        var arr_s = this.form.detectIpClone[curIP].startIp.split(".");
        var arr_e = value.split(".");
        let flag = null;
        for (var i = 0; i < 4; i++) {
          if (arr_s[i] < arr_e[i]) {
            flag = true;
          } else if (arr_s[i] == arr_e[i]) {
            if (i == 3) {
              flag = true;
            }
          } else {
            flag = false;
          }
        }
        if (flag == true) {
          callback();
        } else if (flag == false) {
          callback("结束IP不能在开始IP之前!");
        }
      } else {
        callback("请输入正确的IP地址");
      }
    },

内容回显的时候

扫描ip范围对应的字段涉及的内容;最好是使用另一个变量进行暂存;

bug:添加完多条ip,出现变量污染的问题;原数据被修改;

  this.form.detectIpClone = [];

        let arr = this.form.detectIp.split(",");

        arr.map((item) => {

          let list = item.split("-");

          this.form.detectIpClone.push({

            startIp: list[0],

            endIp: list[1],

          });

        });

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值