vue3-validate

一個基於 vuelidate 所延伸並適用於 vue3 的表單驗證套件

Install

> npm install @vuelidate/core @arshown/vue3-validate
# or
> yarn add @vuelidate/core @arshown/vue3-validate

Usage

複寫原 @vuelidate/core 的 useVuelidate 使用方式，添加驗證訊息

<script>
import { reactive } from "vue";
import { useValidate } from "@arshown/vue3-validate";
import { required, minLength } from "@vuelidate/validators";

export default {
  setup() {
    const form = reactive({
      name: "",
    });
    const rules = {
      name: {
        required,
        minLength: minLength(4),
      },
    };
    const messages = {
      name: {
        required: "名稱為必填",
        minLength: () => ({ min }) => `長度至少為 ${min}`,
      },
    };

    const v$ = useValidate(rules, form, messages);

    return { form, v$ };
  }
}
</script>

minLength 參數參考： https://github.com/vuelidate/vuelidate/blob/next/packages/validators/src/withMessages/minLength.js