快速入门

安装

pnpm install @vorms/core

效果

快速入门

全局

注意

1. 全局 验证 就是通过 useForm 的 validate 函数来验证

2. 全局验证 所有的表单验证都走一个规则

3. initialValues(赋初始值) onSubmit(提交) 这两个必须填写.

<template>
  <div>
    <el-form
      @submit.prevent="handleSubmitAll"
      @reset="handleResetAll"
      style="width: 600px; margin: 0 auto; margin-top: 20px"
    >
      <el-form-item label="选择糖分">
        <el-select v-model="sugar" v-bind="sugarFieldAttrs">
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div>{{ errors.sugar }}</div>
      </el-form-item>
      <el-form-item label="输入饮品" style="width: 300px">
        <el-input
          type="text"
          v-model="drink"
          v-bind="drinkFieldAttrs"
        ></el-input>
        <!-- <div
          style="
            color: red;
            position: absolute;
            top: 0px;
            left: 250px;
            width: 200px;
          "
        >
          {{ errors.drink }}
        </div> -->
        <div style="color: red; width: 200px">
          {{ errors.drink }}
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmitAll">提交</el-button>
        <el-button @click="handleResetAll">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
// 1. 导入useForm
import { useForm } from "@vorms/core";
// 2. 调用useForm 导出来 register(注册) handleSubmit(提交) handleReset(重置) errors(错误信息)

const { register, handleSubmit, handleReset, errors, isSubmitting } = useForm({
  // 赋初始值
  initialValues: {
    drink: "",
    sugar: "",
  },
  // 初始提示
  initialErrors: {
    drink: "饮品初始提示",
    sugar: "糖分初始提示",
  },
  // 所有表单的增加验证
  validate(values) {
    const errors = {};
    if (!values.drink) {
      errors.drink = "请输入饮品2";
    }
    if (!values.sugar) {
      errors.sugar = "请选择糖分2";
    }
    return errors;
  },
  // 首次提交前验证模式
  validateMode: "submit", // 'blur' | 'input' | 'change' | 'submit';
  // 首次提交之后修改验证模式,这个就是用户填写错了。你改成submit
  reValidateMode: "submit", // 'blur' | 'input' | 'change' | 'submit';
  // 当组件被挂载的时候自动验证,这样初始提示就显示不出来
  validateOnMounted: true,
  // 提交事件
  onSubmit(data) {
    console.log(isSubmitting.value);
    console.log(data);
  },
});

const { register, handleSubmit, handleReset, errors } = useForm({
  // 赋初始值
  initialValues: {
    drink: "",
    sugar: "",
  },
  // 表单初始验证错误信息
  // initialErrors: {
  //   drink: "饮品初始错误信息",
  //   sugar: "糖分初始错误信息",
  // },
  validateMode: "submit", // 'blur' | 'input' | 'change' | 'submit' 一共就这几种

  // 提交事件
  onSubmit(data) {
    console.log(data);
  },
});

// 3. 调用register 注册表单字段
const { value: drink, attrs: drinkFieldAttrs } = register("drink");
// 单独表单的验证
const { value: sugar, attrs: sugarFieldAttrs } = register("sugar");

// 下拉选项
const selectOptions = ref([
  { label: "无糖", value: "no" },
  { label: "微糖", value: "small" },
  { label: "中糖", value: "middel" },
  { label: "全糖", value: "large" },
]);
const handleResetAll = () => {
  handleReset();
};

const handleSubmitAll = () => {
  handleSubmit();
};
</script>

<style lang="scss" scoped></style>

局部验证

::: wanring 注意

1. 局部验证 就是通过 register 注册表单字段的时候，传入 validate 函数来验证

2. 局部验证 每个表单都有自己独立的验证规则

3. 局部注册仅仅能写验证规则

:::

<template>
  <div>
    <el-form
      @submit.prevent="handleSubmitAll"
      @reset="handleResetAll"
      style="width: 600px; margin: 0 auto; margin-top: 20px"
    >
      <el-form-item label="选择糖分">
        <el-select v-model="sugar" v-bind="sugarFieldAttrs">
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div>{{ errors.sugar }}</div>
      </el-form-item>
      <el-form-item label="输入饮品" style="width: 300px">
        <el-input
          type="text"
          v-model="drink"
          v-bind="drinkFieldAttrs"
          @blur="handleBlur"
        ></el-input>
        <!-- <div
          style="
            color: red;
            position: absolute;
            top: 0px;
            left: 250px;
            width: 200px;
          "
        >
          {{ errors.drink }}
        </div> -->
        <div style="color: red; width: 200px">
          {{ errors.drink }}
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmitAll">提交</el-button>
        <el-button @click="handleResetAll">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
// 1. 导入useForm
import { useForm } from "@vorms/core";
// 2. 调用useForm 导出来 register(注册) handleSubmit(提交) handleReset(重置) errors(错误信息)
const { register, handleSubmit, handleReset, errors, isSubmitting } = useForm({
  // 赋初始值
  initialValues: {
    drink: "",
    sugar: "",
  },
  // 初始提示
  initialErrors: {
    drink: "饮品初始提示",
    sugar: "糖分初始提示",
  },
  // 首次提交前验证模式
  validateMode: "submit", // 'blur' | 'input' | 'change' | 'submit';
  // 首次提交之后修改验证模式
  reValidateMode: "submit", // 'blur' | 'input' | 'change' | 'submit';
  // 当组件被挂载的时候自动验证,这样初始提示就显示不出来
  validateOnMounted: true,
  // 提交事件
  onSubmit(data) {
    console.log(isSubmitting.value);
    console.log(data);
  },
});

// 3. 调用register 注册表单字段
const { value: drink, attrs: drinkFieldAttrs } = register("drink", {
  validate: (value) => {
    if (!value) {
      return "饮品不能为空";
    }
  },
});

// 单独表单的验证
const { value: sugar, attrs: sugarFieldAttrs } = register("sugar", {
  validate: (value) => {
    console.log(value);
    if (!value) {
      return "糖份不能为空";
    }
  },
});

// 下拉选项
const selectOptions = ref([
  { label: "无糖", value: "no" },
  { label: "微糖", value: "small" },
  { label: "中糖", value: "middel" },
  { label: "全糖", value: "large" },
]);
const handleResetAll = () => {
  handleReset();
};

const handleSubmitAll = () => {
  handleSubmit();
};

const handleBlur = () => {
  console.log("失去焦点");
};
</script>

<style lang="scss" scoped></style>