窗体验证符

安装

yarn add @convidera-team/vue-form-validator

或者说

npm install @convidera-team/vue-form-validator --save

基本用途

<script lang="ts" setup>
import {
  useFormValidator,
  isFormValidatorError,
  isAxiosError,
} from '@convidera-team/vue-form-validator';

const rules = useRules();
const form = useFormValidator();

const name = form.addField('name', '', [
  rules.required('The field is required'),
]);

const email = form.addField('email', '', [
  rules.required('The field is required'),
  rules.email('The field should be email'),
]);

const password = form.addField('password', '', [
  rules.required('The field is required'),
  rules.min(6, 'The field should be min 6 characters'),
]);

const passwordConfirmation = form.addField('password_confirmation', '', [
  rules.required('The field is required'),
  (value) => rules.confirmed(password.value.value, 'The confirmation is incorrect')(value),
]);

async function submit() {
  try {
    // If there are any validation errors, they will be thrown and apiRequest will not be called
    await form.handleSubmit(() => apiRequest({
      name: name.value.value,
      email: email.value.value,
    }));
  } catch (error) {
    if (isFormValidatorError(error)) {
      // Catch form validation errors
      console.warn(error.list);
    } else if (isAxiosError(error)) {
      // Catch axios errors
      console.warn(error.response?.data);
    } else {
      throw error;
    }
  }
}
</script>

<template>
  <form @submit.prevent="submit">
    <input
      v-model="name.value.value"
      label="Name"
      :valid="name.valid.value"
      @blur="name.validate()"
    >
    {{ name.errors.value[0] }}

    <input
      v-model="email.value.value"
      label="email"
      :valid="email.valid.value"
      @blur="email.validate()"
    >
    {{ email.errors.value[0] }}

    <input
      v-model="password.value.value"
      label="password"
      type="password"
      :valid="password.valid.value"
      @blur="password.validate()"
    >
    {{ password.errors.value[0] }}

    <input
      v-model="passwordConfirmation.value.value"
      label="passwordConfirmation"
      type="password"
      :valid="passwordConfirmation.valid.value"
      @blur="passwordConfirmation.validate()"
    >
    {{ passwordConfirmation.errors.value[0] }}

    <button
      type="submit"
    >
      submit
    </button>
  </form>
</template>

当你这样做 form.addField('name', initialValue, [list of rules]) 你给球场一个名字, 初始价值和审定规则清单。 名称用于在表单中识别字段. 对于 示例,如果出现 api 错误,您要显示字段错误响应中指定的错误. 若为 apiRequest 内 await form.handleSubmit(() => apiRequest()); 由于 api 验证失败 错误, api 返回的错误将使用名称映射到窗体中的字段 期间指定 form.addField('fieldName')。所以确保以同样的方式命名字段 在 api 响应中被命名.

你们可以跑 yarn dev 在浏览器中看到基本使用.

也可以在字段创建后添加验证规则

const newPassword = form.addFiled('newPassword', '', [
  ...someValidationRules
]);

const passwordConfirmation = form.addFiled('passwordConfirmation', '', [
  (value) => rules.confirmed(newPassword.value.value)(value),
]);

const currentPassword = form.addFiled('currentPassword', '', [
  (value) => rawRules.requiredIf([
    newPassword.value.value,
    passwordConfirmation.value.value,
  ], 'Required if new password and password confirmation provided')(value),
]);

newPassword.addRules([
  (value) => rawRules.requiredIf([
    currentPassword.value.value,
    passwordConfirmation.value.value,
  ], 'Required if current password and password confirmation provided')(value),
]);

需要的习惯实例 如果规则

如果预定义不适合您, 您也可以创建自己的规则 。 这里有一个需要自定义的 TS 示例 如果规则:

import {
  LocationTypeEnum,
} from 'project-specific';
import {
  useFormValidator,
  TFormValidatorRule,
} from '@convidera-team/vue-form-validator';

const requiredIf: (type: LocationTypeEnum) => TFormValidatorRule<undefined> = (type) => () => locationType.value.value === type;
const form = useFormValidator();
const address = form.addField(
  'address',
  undefined,
  [
    requiredIf(LocationTypeEnum.PHYSICAL),
  ],
);

现有验证规则

请检查 这里

翻译 vue-i18n

重要

添加新翻译时, 请确保同时调整 src/form-validator/translation/schema.ts 文件已提供 typescript 支助.

软件包提供 en 财务报告和审定财务报表 de 可用于扩展的翻译 vue-i18n 翻译:

// English translation file
import {
  en as formValidation,
} from '@convidera-team/vue-form-validator';

export default {
  // other translations
  ...formValidation,
}

那样就可以使用 formValidator 默认直接翻译而无需指定 每个验证规则的文本 :

import {
  useI18n,
} from 'vue-i18n';
import {
  useRules
} from '@convidera-team/vue-form-validator';

const {
  t,
} = useI18n();

const rules = useRules(t);
const form = useFormValidator();

const name = form.addField('name', '', [
  rules.required(),
]);

如果您不想使用默认的翻译, 但有自己的翻译, 您可以覆盖翻译 国家 formValidator 在您的翻译文件中。 为此,您可以使用同样的密钥 例如在 语 文 在您的文档中覆盖 翻译 :

// Translation file
export default {
  // other translations
  formValidator: {
    required: 'Custom message for required rule',
    email: 'This field should be email',
    min: 'Custom message for min rule {min}',
    // Other overrides
  },
}

也可以以同样的方式增加其他语言的翻译.

更改日志

1.1.3 国家

• 更新依赖关系