字符串数字组合的Vuetify验证规则答案

【问题标题】：Vuetify validation rules for string numeric combination字符串数字组合的Vuetify验证规则
【发布时间】：2021-09-24 17:15:02
【问题描述】：

我正在尝试确定如何使用 Vuetify 验证来确保规则（在 v-text-field 上使用 :rules 标签）符合这种格式：

AB-12345678（前两个字符是字母，后跟连字符，然后是 8 位数字）

我在不使用 CharAt 的情况下努力做到这一点，但我认为有一种更清洁、更简单的方法。

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

您可以使用正则表达式检查验证

正则表达式规则：[A-B]{2}-[0-9]{8}

检查代码

<template>   
  <v-text-field
      :rules="customRule"
  />
</template>

<script>

export default {
  computed: {
    customRule() {
      return [
        v => /[A-B]{2}\-[0-9]{8}/.test(v) || "rule is not valid"
      ],
    }
  }
}

</script>

【讨论】：

忽略这里的语法错误，似乎emailRules（或customRule？）应该是一个计算属性。函数不应该是组件状态的一部分...
我已经修复了错误的命名。但是应该在数据中添加 CustomRule .. 不是像 Vuetify 文档中所写的那样计算
vuetify 文档中的哪个地方这么说？计算属性在这里工作得非常好。也许我错过了什么......
github.com/vuetifyjs/vuetify/tree/master/packages/docs/src/…

【解决方案2】：

我会使用正则表达式

<v-text-field
  :rules="[v => /^[A-Z]{2}-\d{8}$/gm.test(v)]"
/>

这完全取决于你想要什么，但这个正则表达式正在做：

^ 匹配行首
[A-Z]{2} 完全匹配 2 个大写字符
- 如果大小写无关，请使用[A-Za-z]{2}
- 匹配破折号
\d{8} 匹配 8 位数字
$匹配行尾
gm 最后是正则表达式的标志

Here's a page to test it

【讨论】：

这个答案提供了每个组件及其用途。我觉得它帮助我更好地理解了正则表达式及其在 vuetify 验证中的使用。谢谢！

【解决方案3】：

您应该考虑使用正则表达式。类似：^[A-Z]{2}-[0-9]{8}$ 应该可以工作。

要在javascript中使用Regex，你应该参考Mozilla developers docs

看起来像这样：

const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// expected output: Array ["T", "I"]

【讨论】：