如何知道规则在 vuetify v-text-field 中是不是失败？

Posted 2023-02-22

【中文标题】如何知道规则在 vuetify v-text-field 中是不是失败？

【英文标题】：How to know if rule is failing in vuetify's v-text-field?如何知道规则在 vuetify v-text-field 中是否失败？

【发布时间】：2018-02-27 10:24:17

【问题描述】：

我如何知道 vuetify 中的“规则”是否失败？我有一个文本字段

<v-text-field label="Friendly URL" :rules="[rules.friendlyUrl]" v-model="friendlyUrl"></v-text-field>

还有我的规则定义：

data () 
  return 
    rules:
      friendlyUrl(value)
        console.log('validating value');
        if (/^[a-z0-9\-]*$/.test(value))
          return true;
        
        return 'only lowercase letters, numbers and dashes are allowed'
      
    
  

我想“观察”一些东西以了解我的规则是否失败。这样我就可以禁用提交按钮，直到所有规则都通过。

如果您知道如何为多个文本字段进行设置，则可以获得奖励积分。

【问题讨论】：

这一切都是 Vuetify 开箱即用的。 vuetifyjs.com/components/formscodepen.io/pen/?editors=1010

啊，我明白了，我需要把它包装成 v 形！大量搜索，我找不到这个:-(。请随意将其添加为官方答案，我会将其标记为已接受！

非常感谢您！我已经搜索了大约 2 天了！！！

【参考方案1】：

如果您使用他们的v-form component，Vuetify 将为您完成此操作。

<v-form v-model="valid">
  <v-text-field label="Friendly URL" :rules="[rules.friendlyUrl]" v-model="friendlyUrl"></v-text-field>
</v-form>

其中，valid 是一个布尔数据属性。您可以使用它来切换按钮、设置类等。

【讨论】：

钢笔示例似乎不再有效。

@Ifty 谢谢，我删除了它。我想我最初回答时只是粘贴了错误的链接。

如果有多个输入怎么办？在这种情况下它不起作用