正则校验的多种方式

lf811

已于 2023-04-11 15:56:28 修改

阅读量3.3k

点赞数 2

分类专栏：正则校验文章标签：前端正则表达式

于 2022-08-30 17:22:11 首次发布

本文链接：https://blog.csdn.net/lf811/article/details/126607922

版权

正则校验专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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],

});

});