时间戳

首页 > 解决方案 > 为什么带有端口号的 Vutify 表单验证的 URL 规则的正则表达式会出错？

vue.js - 为什么带有端口号的 Vutify 表单验证的 URL 规则的正则表达式会出错？

问题描述

以下没有端口号的 URL 规则运行良好。

export default {
  data: () => ({
    valid: true,
    url: '',
    urlRules: [
      v => !!v || 'URL is required',
      v => (v && v.length <= 256) || 'URL must be less than 256 characters',
      v => /https?:\/\/[\w!?/\+\-_~=;\.,*&@#$%\(\)\'\[\]]+/.test(v) || 'URL must be valid',
    ],
  }),
  components: {
  },
}

然后，我[0-9]*为 URL 的端口号部分设置了如下规则。

export default {
  data: () => ({
    valid: true,
    url: '',
    urlRules: [
      v => !!v || 'URL is required',
      v => (v && v.length <= 256) || 'URL must be less than 256 characters',
      v => /https?:[0-9]*\/\/[\w!?/\+\-_~=;\.,*&@#$%\(\)\'\[\]]+/.test(v) || 'URL must be valid',
    ],
  }),
  components: {
  },
}

但这会发生以下错误：

  34:36  error  Unnecessary escape character: \+  no-useless-escape
  34:44  error  Unnecessary escape character: \.  no-useless-escape
  34:53  error  Unnecessary escape character: \(  no-useless-escape
  34:55  error  Unnecessary escape character: \)  no-useless-escape
  34:57  error  Unnecessary escape character: \'  no-useless-escape
  34:59  error  Unnecessary escape character: \[  no-useless-escape

✖ 6 problems (6 errors, 0 warnings)

我不知道为什么附加端口号部分会破坏正则表达式。谢谢你的建议！

标签： vue.jsvuetify.js

解决方案

该问题与 vuetify 规则或正则表达式无关。你应该看看你的 ESLint 配置。此错误表示您的代码未通过“no-useless-escape”ESLint 规则。

作为一种快速解决方法，您可以对某些行禁用 ESLint 规则。此代码应该可以工作：

export default {
  data: () => ({
    valid: true,
    url: '',
    urlRules: [
      v => !!v || 'URL is required',
      v => (v && v.length <= 256) || 'URL must be less than 256 characters', /* eslint-disable-next-line no-useless-escape*/
      v => /https?:[0-9]*\/\/[\w!?/\+\-_~=;\.,*&@#$%\(\)\'\[\]]+/.test(v) || 'URL must be valid',
    ],
  }),
  components: {
  },
}

推荐阅读