时间戳

首页 > 解决方案 > Vuetify 默认规则实现

validation - Vuetify 默认规则实现

问题描述

我正在使用 Vuetify 并使用其向输入字段添加规则的默认方式。

我知道有这个规则： v => !!v

这将检查表单输入是否为空。但是我怎样才能使它只接受字母、数字甚至应用正则表达式呢？我在文档中找不到任何内容。有任何经验的人可以帮助我吗？

标签： validationvuetify.js

解决方案

所以我假设你现在可能已经对这个进行了排序，但是对于从谷歌等找到这个的人来说。

要添加新规则，您需要将其添加到您的 vue 组件中，或者通过导入或直接将其添加到您的数据对象中。您可以像命名任何其他数据属性一样命名它，它是一个测试数组，就像v => !!v您提到的那样。然后添加 OR 运算符，后跟要在验证失败时显示的文本。

因此，要添加一个只允许字母的正则表达式，您将拥有：

data () {
  return {
    alphaRule: [
      v => /[a-zA-Z]+$/.test(v) || 'Field must only contain letters'
    ]
  }
}

然后在您的表单字段上，您将拥有<v-text-field :rules="alphaRule"></v-text-field>

也就是说，我强烈建议您将所有规则添加到 Rules.js 文件并全局绑定规则，以便您可以在任何地方访问它们，为它们提供一个集中的存储库，并且它也有助于保持您的代码干燥。

我刚刚制作了一个受Laravel 验证规则启发的规则列表，一旦完成测试，我将编辑我的答案以包含它们。

编辑 这是我目前在生产中使用的所有规则。希望他们会帮助别人！您需要将它们导入到您的组件中才能使用它们，或者您可以通过 vue mixin 全局包含它们。

推荐阅读