正则表达式相关方法与验证

最新推荐文章于 2021-12-15 08:15:42 发布

ylxblog

最新推荐文章于 2021-12-15 08:15:42 发布

阅读量612

点赞数 1

分类专栏：正则表达式文章标签： javascript

本文链接：https://blog.csdn.net/yangyang3401/article/details/112008653

版权

正则表达式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.JavaScript match() 方法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

stringObject.match(searchvalue)
stringObject.match(regexp)

返回值: 存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

简单实例：

<html>
<body>

<script type="text/javascript">

var str="[30522]服务器[s1s1]端口扫描－SYNACK扫描"
document.write(str.match(/\[(.+?)\]/))    //["[30522]", "30522"]

</script>

</body>
</html>

项目实例：

if (this.model.operate) {
  this.eventId = this.model.operate.match(/\[(.+?)\]/)
    ? this.model.operate.match(/\[(.+?)\]/)[1]
    : ''
  console.log(this.model.operate)  // "[40301]SNMP服务试图使用默认public口令访问"
  console.log(this.model.operate.match(/\[(.+?)\]/))  
  // (2) ["[40301]", "40301", index: 0, input: "[40301]SNMP服务试图使用默认public口令访问", groups: undefined]
    // 0: "[40301]"
    // 1: "40301"
    // groups: undefined
    // index: 0
    // input: "[40301]SNMP服务试图使用默认public口令访问"
    // length: 2
  console.log(this.model.operatematch(/\[(.+?)\]/)[1])  // 40301
}

注：match() & test()

test是RegExp的方法，参数是字符串，返回值是boolean类型。
match是String的方法，参数是正则表达式，返回值是数组。

2. JavaScript test() 方法–test()

定义和用法:

test() 方法用于检测一个字符串是否匹配某个模式.

语法:

RegExpObject.test(string)

参数	描述
string	必需。要检测的字符串。

返回值:

如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

(1) 匹配一段字符串

/123456/.test("123456")   //ture
/123456/.test("abc123456")   //ture
/123456/.test("123456abc")   //ture
/123456/.test("12345")   //flase

<script type="text/javascript">
var str = "Visit W3School";
var patt1 = new RegExp("W3School");

var result = patt1.test(str);

document.write("Result: " + result);  // Result: true
</script>

(2) 项目实例： —(匹配一个位置)

// ^：起始位置
// $：结尾位置
// \b：单词边界
/^http/.test("http://www.baidu.com")    //ture
/^http/.test("ahttp://www.baidu.com")    //flase
/com$/.test("http://www.baidu.com")    //ture
/com$/.test("http://www.baidu.comb")    //flase
/\bis\b/.test("this")    //flase   此处的is不是单词
/\bis\b/.test("that is my mom !")   //ture

for (let i = 0; i < this.currentItems.length; i++) {
  //匹配范围字段验证-matchType  ^\d{1,9}-\d{1,9}$
  if (this.currentItems[i].matchRange) {
    const matchs = this.currentItems[i].matchRange
    const reg1 = /^\d{1,9}-\d{1,9}$/
    if (!reg1.test(matchs)) {
      error(this.$t('schema.dpi.errorMatch'))
      return
    }
  }
  //验证特征串输入格式    /^[\\][x][0-9a-fA-F]{2}$/  ---16进制验证，例：\x01,\x02
  for (let j = 0; j < this.currentItems[i].character.length; j++) {
    if (
      this.currentItems[i].character[j] === '\\' &&
      this.currentItems[i].character[j + 1] === 'x'
    ) {
      const strs = this.currentItems[i].character.substr(j, 4)
      const reg = /^[\\][x][0-9a-fA-F]{2}$/
      if (!reg.test(strs)) {
        error(this.$t('schema.dpi.errorEmptyHex'))
        return
      } else {
        j = j + 3
      }
    }
  }
}

注： JavaScript RegExp 对象：RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法：

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数：

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值：

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

3. JavaScript exec() 方法

定义和用法：

exec() 方法用于检索字符串中的正则表达式的匹配。

语法：

RegExpObject.exec(string)

参数	描述
string	必需。要检索的字符串。

返回值：

返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

例：将全局检索字符串中的 W3School：

<html>
<body>

<script type="text/javascript">

var str = "Visit W3School, W3School is a place to study web technology."; 
var patt = new RegExp("W3School","g");
var result;

while ((result = patt.exec(str)) != null)  {
  document.write(result);
  document.write("<br />");
  document.write(patt.lastIndex);
  document.write("<br />");
 }
</script>

</body>
</html>
// W3School
// 14
// W3School
// 24

4. 验证中文、手机号、ip、port、16进制数、非法字符和汉字

import { extend } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import i18n from '@/i18n'
import { isJWT } from 'validator'

// 引入所有规则
Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule])
})
/**
 * 验证是否为中文
 * "chinese": "只允许中文",
 */
extend('chinese', value => {
  const reg = /^[\u4E00-\u9FA5]{1,}$/
  return reg.test(value)
})

/**
 * 验证手机号phone
 * "phone": "手机号无效",
 */
extend('phone', value => {
  const reg = /^1(3|4|5|7|8|9)\d{9}$/
  return reg.test(value)
})

/**
 * 验证Ip
 * "ip": "ip地址无效",
 */
extend('ip', value => {
  const reg = /^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$/
  const reg1 = /^(\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])$/
  return reg.test(value) ? reg.test(value) : reg1.test(value)
})

/**
 * 验证port   /^[0-9a-fA-F]{1,3}$/
 * "port": "端口无效",
 */
extend('port', value => {
  const reg = /^([1-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
  return reg.test(value)
})

/**
 * 验证以0x开头的16进制数，例如0x83e6,长度不超过4   /^[0-9a-fA-F]{1,4}$/
 * "0x": "请输入以0x开头的16进制数，长度不超过4，例如0x83e6",
 */
 extend('0x', value => {
  const reg = /^[0][x][0-9a-fA-F]{1,4}$/
  return reg.test(value)
})

/**
 * 验证非法字符和汉字
 * "illegal": "特征串包含非法字符"
 */
 extend('illegal', value => {
  const reg = /^([0-9a-zA-Z]|[\\]){1,200}$/
  return reg.test(value)
})

/**
 * 数字校验
 * "number": "应为数字",
 */
extend('number', value => {
  const reg = /^(-|\+)?\d+(\.\d+)?$/
  return reg.test(value)
})

/**
 * 授权码格式校验
 * "license": "授权码格式不合法",
 */
extend('license', value => {
  return isJWT(value)
})

/**
 * 验证子网掩码
 */
extend('submask', value => {
  const reg = /^(254|252|248|240|224|192|128|0)\.0\.0\.0$|^(255\.(254|252|248|240|224|192|128|0)\.0\.0)$|^(255\.255\.(254|252|248|240|224|192|128|0)\.0)$|^(255\.255\.255\.(254|252|248|240|224|192|128|0))$/
  return reg.test(value)
})
--------------------------------------------------------------------------------------

/**
 * 远端验证
 * 接收两个参数 callback 和 args
 * callback(value,args) 异步回调函数，
 *   其结果将直接作为验证结果,true-验证通过,false-验证不通过
 *   参数: value-表示用户输入的内容; args-一个对象可包含任意值
 * args 其值会原封不动的传递给func回调函数，作为func的第二个参数
 * 可参见 /src/views/demo/one-table/edit.vue 中value字段的远程验证示例
 * 注意加入:debounce="500"参数，避免过于频繁的进行远端验证
 * 使用示例
 * <vee
 *   :customMessages="{remote:'此值已经存在'}"
 *   :debounce="500"
 *   :rules="{required: true, remote: { callback: uniqueValue, args:{id: model.id }}}"
 *   v-slot="{ errors }"
 * >
 *   <v-text-field
 *     :error-messages="errors"
 *     :label="$t('schema.dictionary.value')"
 *     v-model="model.value"
 *   ></v-text-field>
 * </vee>
 */
extend('remote', {
  async validate(value, para) {
    // 调用提供的回调函数,将用户输入的值作为第一个参数,将传递给验证函数的args参数作为第二个参数
    return await para.callback(value, para.args)
  },
  params: ['callback', 'args'],
  /**
   * 默认的提示消息，使用时可使用customMessages覆盖
   * 比如,上方代码中的:customMessages="{remote:'此值已经存在'}"
   */
  message: i18n.t('validations.remote')
})

注：实例： syslog服务器ip唯一性校验

<!--
  FilePath: \src\views\devices\outdata\syslogServer-dialog.vue
  Project: xxx
  CreatedAt: 2021-05-09 11:33:46
  CreatedBy: 666
  Copyright: (c) 2021
  Task: #1
  新增/修改syslog服务器弹框
-->

<template>
  <single-dialog
    :actions="actions"
    :icon="icon"
    :title="title"
    @cancel="cancel"
    @ok="ok"
    max-width="500"
    v-model="value"
  >
    <vee-ob ref="ob">
      <form-flex class="pb-0">
        <v-row class="mx-0">
          <v-col
            class="pb-0"
            cols="6"
          >
            <vee
              :customMessages="{remote:$t('common.messages.alreadyExist')}"
              :debounce="500"
              :rules="{required: true, ip: true, remote: { callback: uniqueValue, args:{id: currentModel.id }}}"
              v-slot="{ errors }"
            >
              <v-text-field
                :error-messages="errors"
                :label="$t('schema.system.ip')"
                placeholder="192.168.1.1"
                v-model="currentModel.ip"
              ></v-text-field>
            </vee>
          </v-col>
          <v-col
            class="pb-0"
            cols="2"
          >
            <vee
              rules="required|port"
              v-slot="{ errors }"
            >
              <v-text-field
                :error-messages="errors"
                :label="$t('schema.system.port')"
                placeholder="514"
                v-model="currentModel.port"
              ></v-text-field>
            </vee>
          </v-col>
          <v-col
            class="mt-n8"
            cols="12"
          >
            <div>
              <h4 class="pt-4 pb-1">{{$t('schema.system.uploadData')}}</h4>
              <v-row class="mb-n3">
                <v-col
                  :key="index"
                  class="mt-n6"
                  cols="4"
                  v-for="(item, index) in this.uploadDatas"
                >
                  <v-checkbox
                    :label="item.text"
                    :value="item.value"
                    class="pt-0"
                    dense
                    hide-details
                    v-model="currentModel.items"
                  ></v-checkbox>
                </v-col>
              </v-row>
            </div>
          </v-col>
        </v-row>
      </form-flex>
    </vee-ob>
  </single-dialog>
</template>

<script>
import { singleDialog } from '@c/dialogs'
import { formFlex } from '@c/forms'
import { update, create, validateSyslogServerIp } from '@api/system/outData'
import { success, error } from '@utils/message'

export default {
  components: { singleDialog, formFlex },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    uploadDatas: {
      type: Array,
      default: () => []
    },
    model: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      actions: true,
      currentModel: {}
    }
  },
  watch: {
    model: {
      handler(val) {
        this.currentModel = JSON.parse(JSON.stringify(val))
      },
      immediate: true
    }
  },
  methods: {
    async uniqueValue(value, args) {
      const res = await validateSyslogServerIp(value, args.id)  //远端验证
      return res.length <= 0   // true-验证通过,false-验证不通过
    },
    cancel() {
      this.$emit('input', false)
    },
    async ok() {
      const valid = await this.$refs.ob.validate()
      if (!valid) {
        return
      }
      const { ip, port, items } = this.currentModel
      let data = {
        ip,
        port: Number(port),
        items
      }
      try {
        if (this.currentModel.id) {
          data = {
            ip: { set: ip },
            port: { set: Number(port) },
            items
          }
          await update(this.currentModel.id, data)
        } else {
          await create(data)
        }
        this.$emit('changed')
        this.$emit('input', false)
        success()
      } catch (err) {
        error()
        throw new Error(err)
      }
    }
  }
}
</script>
--------------------------------------------------------------------------------------
//validate-syslogServer-ip.gql
query($where: SyslogServerWhereInput) {
  rows: findManySyslogServer(where: $where) {
    id
  }
}
---------------------------------------------------------------------------------------
import client from '../client'
import gqlValidateSyslogServerIp from './validate-syslogServer-ip.gql'
/**
 * syslog服务器ip唯一性校验
 * @param {string} value
 * @param {string} id
 * @returns
 */
export async function validateSyslogServerIp(value, id){
  const res = await client.query({
    query: gqlValidateSyslogServerIp,
    variables: {
      where: {
        AND: [
          { ip: { equals: value } },
          { id: { not: { equals: id } } }   //修改时判断 currentModel.id
        ]
      }
    }
  })
  return res.data.rows
}