使用 Vuetify 验证文本区域进行手动验证

Question

我有一个 Vuetify Web 应用程序的搜索框，当用户点击搜索图标时，表单字段会执行典型的验证规则，如果不符合这些正则表达式规范，则会应用消息。

我使用经过验证的输入进行发布请求，看看是否有任何结果从我们的数据库返回。如果结果确实返回我转到下一页，如果结果失败我想使用验证字段区域说 ID 不存在。

这可能吗？ vuetify 是否提供了一种通过某种道具在此验证区域中显示自定义消息的方法？一直没找到。

Answer 1

是的，你可以做到； Vuetify 文档有一个关于输入字段错误状态的部分：#error。我整理了一个sn-p来演示错误状态的控制：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      validationProp: true,
    }
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-text-field outlined v-bind="{
                error: !validationProp,
                ...(!validationProp && { 'error-messages': ['Fatal error'] })
              }" />
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-btn @click="validationProp = !validationProp">
              TOGGLE ERROR STATE
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

唯一的问题是，如果我只是添加了error 属性，控件就可以工作，但是没有消息；如果我还添加了error-messages，那么控件就会停止工作——它一直处于错误状态。因此，我决定有条件地添加error-messages：

...(!validationProp && { 'error-messages': ['Fatal error'] })

---

编辑

如果你想“以error-message为目标”，那么你只需要绑定一个变量而不是一个简单的字符串。

根据下面的评论，编辑了sn-p：

const DEFAULT_ERROR_MESSAGE = 'Default error message'

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      validationProp: true,
      errorMessage: DEFAULT_ERROR_MESSAGE,
    }
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-text-field outlined label="Type here the error message you want" v-model="errorMessage" />
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-text-field outlined v-bind="{
                error: !validationProp,
                ...(!validationProp && { 'error-messages': [errorMessage] })
              }" />
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-btn @click="validationProp = !validationProp">
              TOGGLE ERROR STATE
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>