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

Question

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

我使用经过验证的输入来执行 post 请求，并查看我们的数据库是否有任何结果 return。如果结果确实return我去下一页，如果结果失败我想用验证字段区域说ID不存在

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

Answer 1

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

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”，那么你只需要绑定一个变量而不是一个简单的字符串。

根据下面的评论，对代码段进行了编辑：

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>

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

Using Vuetify validation text area for manual validation

vue.js

vuetify.js

编辑