Vue 3的动态表单验证库 - vue3-form-validation

Vue 3的动态表单验证库 - vue3-form-validation
插件名称 vue3-form-validation
版本号 v4.0.2
发布时间 2021年5月26日
插件作者 JensDll

支持自定义验证规则的Vue 3应用程序的动态表单验证库。

安装和下载:

# NPM
$ npm i vue3-form-validation --save

基本用法

1.导入表单验证组件。

import { useValidation, ValidationError } from "vue3-form-validation";

2.此示例显示了如何验证注册表单中的字段。

<template>
  <h1>Register Form</h1>
  <form class="form" @submit.prevent="handleSubmit()">
    <BaseInput
      class="name"
      label="Name"
      v-model="form.name.$value"
      :errors="form.name.$errors"
      :validating="form.name.$validating"
      @blur="form.name.$onBlur()"
      placeholder="Alice, Bob, Oscar"
    />
    <BaseInput
      class="e-mail"
      label="Email address"
      v-model="form.email.$value"
      :errors="form.email.$errors"
      @blur="form.email.$onBlur()"
    />
    <BaseInput
      class="password"
      label="Password"
      type="password"
      v-model="form.password.$value"
      :errors="form.password.$errors"
      @blur="form.password.$onBlur()"
    />
    <BaseInput
      class="confirm-password"
      label="Confirm Password"
      type="password"
      v-model="form.confirmPassword.$value"
      :errors="form.confirmPassword.$errors"
      @blur="form.confirmPassword.$onBlur()"
    />
    <BaseButton
      class="signup"
      type="primary"
      htmlType="submit"
      :disabled="submitting"
    >
      Register
    </BaseButton>
    <BaseButton class="reset" @click="resetFields()">Reset</BaseButton>
  </form>
  <PreFormData :form="form" :errors="errors" />
</template>
export default {
  components: { BaseInput, BaseButton, PreFormData },
  setup() {
    const password = ref("");
    const confirmPassword = ref("");
    const {
      form,
      errors,
      submitting,
      validateFields,
      resetFields
    } = useValidation({
      name: {
        $value: "",
        $rules: [
          required("Name is required"),
          min(3)("Name has to be longer than 2 characters"),
          name =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                if (["alice", "bob", "oscar"].includes(name.toLowerCase())) {
                  resolve();
                } else {
                  // Resolve or reject with a string
                  resolve("This name is already taken");
                }
              }, 2000);
            })
        ]
      },
      email: {
        $value: "",
        $rules: [email("Please enter a valid email address")]
      },
      password: {
        $value: password,
        $rules: [
          min(7)("Password has to be longer than 7 characters"),
          {
            key: "pw",
            rule: () =>
              password.value === confirmPassword.value ||
              "Passwords do not match"
          }
        ]
      },
      confirmPassword: {
        $value: confirmPassword,
        $rules: [
          min(7)("Password has to be longer than 7 characters"),
          {
            key: "pw",
            rule: () =>
              password.value === confirmPassword.value ||
              "Passwords do not match"
          }
        ]
      }
    });
    const handleSubmit = async () => {
      try {
        const formDate = await validateFields();
        alert(JSON.stringify(formDate, null, 2));
      } catch (e) {
        if (e instanceof ValidationError) {
          console.log(e.message);
        }
      }
    };
    return {
      form,
      errors,
      submitting,
      handleSubmit,
      resetFields
    };
  }
};

变更日志:

v4.0.2 (06/04/2021)

  • 修复:对于多个异步规则,$validating 设置 false 过早

v4.0.1 (06/01/2021)

  • 更新

v3.3.6 (05/31/2021)

  • 使用 ValidationError 正确拒绝

v3.3.5 (05/30/2021)

  • 类型:从 FieldNames 中排除数组

v3.3.4 (05/29/2021)

  • validateFields 的类型定义

v3.3.3 (05/29/2021)

  • 能够将字段名称传递给 validateFields
  • 允许未定义的键控规则