如何在 vuetify 表单中添加调用 API 的自定义验证？

Question

我正在尝试向表单添加自定义验证以测试重复条目。我怎样才能仅使用 vuetify 验证来做到这一点。如果用户输入重复，我想显示内联错误消息。

Answer 1

是的，您可以使用 api 调用验证客户输入的名称，如果名称已存在或发现重复名称，则向用户抛出错误

您可以在 vuetify 文本字段中使用规则属性，它需要一个函数数组并期望 true（验证 true，在您的情况下名称不存在）或字符串（如果验证 false，名称存在于数据库中）

这是工作代码笔：https://codepen.io/chansv/pen/eYYdPzQ ?editors=1010

<div id="app">
  <v-app id="inspire">
      <v-form
        ref="form"
        v-model="valid"
      >
        <v-text-field
          v-model="name"
          :counter="10"
          :rules="[checkDuplicate, rules.required]"
          label="Name"
          required
        ></v-text-field>
        <v-btn @click="submitbtn">submit</v-btn>
      </v-form>
    </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid:true,
    name: '',
    rules: {
      required: v => !!v || 'this field is required',
    }
  }),
  methods: {
    checkDuplicate(val) {
      // write your api call and return the below statement if it already exist
      if (val == 'test') {
        return `Name "${val}" already exist`;
       } else {
         return true;
       }

    },
    submitbtn() {
      this.$refs.form.validate();
    },
  },
})