能否在Vuetify-JSONSchema-Form中添加自定义验证？含后端验证方案问询

当然可以给Vuetify-JSONSchema-Form添加自定义验证，不管是前端侧的还是官方不支持的后端自定义验证，我都有几个实用的方案分享给你：

一、前端自定义验证的实现方式 #

1. 使用组件自带的custom-validation-rules属性 #

这是最直接的方式，针对特定字段添加自定义验证规则，和Vuetify的表单规则语法一致：

<template>
  <v-jsf
    ref="vjsf"
    :schema="userSchema"
    :model="formData"
    :custom-validation-rules="customRules"
  />
</template>

<script>
export default {
  data() {
    return {
      userSchema: {
        type: "object",
        properties: {
          password: { type: "string", title: "密码" },
          confirmPassword: { type: "string", title: "确认密码" }
        }
      },
      formData: {},
      customRules: {
        // 给confirmPassword字段添加密码一致性验证
        confirmPassword: [
          (value) => value === this.formData.password || "两次输入的密码不一致"
        ]
      }
    };
  }
};
</script>

2. 扩展AJV的自定义关键字 #

Vuetify-JSONSchema-Form底层依赖AJV做JSON Schema验证，你可以直接扩展AJV实例添加自定义验证关键字：

<template>
  <v-jsf
    ref="vjsf"
    :ajv="customAjv"
    :schema="userSchema"
    :model="formData"
  />
</template>

<script>
import Ajv from "ajv";

export default {
  data() {
    // 创建自定义AJV实例并添加关键字
    const customAjv = new Ajv({ allErrors: true });
    customAjv.addKeyword("passwordStrength", {
      validate: (schema, data) => {
        if (!schema) return true;
        // 验证密码必须包含字母+数字，长度≥8
        return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(data);
      },
      errorMessage: "密码必须包含字母和数字，长度至少8位"
    });

    return {
      customAjv,
      userSchema: {
        type: "object",
        properties: {
          password: {
            type: "string",
            title: "密码",
            passwordStrength: true // 启用自定义验证关键字
          }
        }
      },
      formData: {}
    };
  }
};
</script>

二、后端自定义验证的替代方案（官方不支持情况下） #

官方确实没有内置后端验证的支持，但我们可以通过以下几种方式实现：

1. 表单提交前先调用后端验证接口 #

在提交表单前，先触发后端的验证接口，根据返回结果手动设置字段错误：

<template>
  <div>
    <v-jsf ref="vjsf" :schema="userSchema" :model="formData" />
    <v-btn @click="handleSubmit">提交</v-btn>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      userSchema: {
        type: "object",
        properties: {
          username: { type: "string", title: "用户名" },
          email: { type: "string", format: "email", title: "邮箱" }
        }
      },
      formData: {}
    };
  },
  methods: {
    async handleSubmit() {
      // 先执行前端验证
      const isFrontValid = await this.$refs.vjsf.validate();
      if (!isFrontValid) return;

      try {
        // 调用后端验证接口
        const res = await axios.post("/api/validate-form", this.formData);
        if (res.data.valid) {
          // 验证通过，执行正式提交
          await this.submitFormToBackend();
        } else {
          // 后端返回错误，给对应字段设置错误提示
          res.data.errors.forEach((error) => {
            const fieldComponent = this.$refs.vjsf.getFieldComponent(error.field);
            if (fieldComponent && fieldComponent.$refs.input) {
              fieldComponent.$refs.input.errorMessages = [error.message];
              fieldComponent.$refs.input.validate();
            }
          });
        }
      } catch (err) {
        console.error("后端验证请求失败", err);
      }
    },
    async submitFormToBackend() {
      // 正式提交表单的逻辑
      await axios.post("/api/submit-form", this.formData);
      // 提交成功后的处理，比如提示、跳转等
    }
  }
};
</script>

2. 封装自定义字段组件，内置后端验证逻辑 #

对于需要实时后端验证的字段（比如用户名唯一性），可以封装自定义组件，在组件内触发后端验证：

<!-- CustomUsernameField.vue -->
<template>
  <v-text-field
    v-bind="$attrs"
    :error-messages="errorMsgs"
    @blur="validateUsername"
  />
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      errorMsgs: []
    };
  },
  methods: {
    async validateUsername() {
      const username = this.$attrs.value;
      if (!username) return;

      try {
        const res = await axios.post("/api/check-username", { username });
        if (!res.data.isAvailable) {
          this.errorMsgs = ["该用户名已被占用"];
        } else {
          this.errorMsgs = [];
        }
      } catch (err) {
        this.errorMsgs = ["验证失败，请稍后重试"];
      }
    }
  }
};
</script>

然后在JSON Schema中指定使用这个自定义组件：

<template>
  <v-jsf ref="vjsf" :schema="userSchema" :model="formData" />
</template>

<script>
import CustomUsernameField from "./CustomUsernameField.vue";

export default {
  components: {
    CustomUsernameField
  },
  data() {
    return {
      userSchema: {
        type: "object",
        properties: {
          username: {
            type: "string",
            title: "用户名",
            component: "CustomUsernameField" // 指定自定义组件
          }
        }
      },
      formData: {}
    };
  }
};
</script>

内容的提问来源于stack exchange，提问作者wassim bezine