ETU组件库

Appearance

Return to top
On this page

Form 表单

表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。

典型表单

最基础的表单包括各种输入表单项，比如 input、select、radio、checkbox 等。

-
<template>
  <etu-form :model="form" label-width="120px">
    <etu-form-item label="Activity name">
      <etu-input v-model="form.name" />
    </etu-form-item>
    <etu-form-item label="Activity zone">
      <etu-select v-model="form.region" placeholder="please select your zone">
        <etu-option label="Zone one" value="shanghai" />
        <etu-option label="Zone two" value="beijing" />
      </etu-select>
    </etu-form-item>
    <etu-form-item label="Activity time">
      <etu-col :span="11">
        <etu-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </etu-col>
      <etu-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </etu-col>
      <etu-col :span="11">
        <etu-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </etu-col>
    </etu-form-item>
    <etu-form-item label="Instant delivery">
      <etu-switch v-model="form.delivery" size="small" />
    </etu-form-item>
    <etu-form-item label="Activity type">
      <etu-checkbox-group v-model="form.type">
        <etu-checkbox label="Online activities" name="type" />
        <etu-checkbox label="Promotion activities" name="type" />
        <etu-checkbox label="Offline activities" name="type" />
      </etu-checkbox-group>
    </etu-form-item>
    <etu-form-item label="Resources">
      <etu-radio-group v-model="form.resource">
        <etu-radio label="Sponsor" />
        <etu-radio label="Venue" />
      </etu-radio-group>
    </etu-form-item>
    <etu-form-item label="Activity form">
      <etu-input v-model="form.desc" type="textarea" />
    </etu-form-item>
    <etu-form-item>
      <etu-button type="primary" @click="onSubmit">Create</etu-button>
      <etu-button>Cancel</etu-button>
    </etu-form-item>
  </etu-form>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

<template>
  <etu-form :model="form" label-width="120px">
    <etu-form-item label="Activity name">
      <etu-input v-model="form.name" />
    </etu-form-item>
    <etu-form-item label="Activity zone">
      <etu-select v-model="form.region" placeholder="please select your zone">
        <etu-option label="Zone one" value="shanghai" />
        <etu-option label="Zone two" value="beijing" />
      </etu-select>
    </etu-form-item>
    <etu-form-item label="Activity time">
      <etu-col :span="11">
        <etu-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </etu-col>
      <etu-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </etu-col>
      <etu-col :span="11">
        <etu-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </etu-col>
    </etu-form-item>
    <etu-form-item label="Instant delivery">
      <etu-switch v-model="form.delivery" size="small" />
    </etu-form-item>
    <etu-form-item label="Activity type">
      <etu-checkbox-group v-model="form.type">
        <etu-checkbox label="Online activities" name="type" />
        <etu-checkbox label="Promotion activities" name="type" />
        <etu-checkbox label="Offline activities" name="type" />
      </etu-checkbox-group>
    </etu-form-item>
    <etu-form-item label="Resources">
      <etu-radio-group v-model="form.resource">
        <etu-radio label="Sponsor" />
        <etu-radio label="Venue" />
      </etu-radio-group>
    </etu-form-item>
    <etu-form-item label="Activity form">
      <etu-input v-model="form.desc" type="textarea" />
    </etu-form-item>
    <etu-form-item>
      <etu-button type="primary" @click="onSubmit">Create</etu-button>
      <etu-button>Cancel</etu-button>
    </etu-form-item>
  </etu-form>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

表单校验

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 更多高级用法可参考 async-validator。

<template>
  <div>
    <etu-form ref="formRef" :model="formData" :rules="rules">
      <etu-form-item label="名称1" prop="name" :rules="rules.name">
        <etu-input v-model="formData.name"></etu-input>
      </etu-form-item>
      <etu-form-item label="名称2" prop="name1" :rules="rules.name1">
        <etu-input v-model="formData.name1"></etu-input>
      </etu-form-item>
      <etu-form-item>
        <etu-button @click.prevent="onSubmit" type="primary">提交</etu-button>
      </etu-form-item>
    </etu-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

const formRef = ref();
const formData = reactive({ name: "", name1: "" });
const rules = {
  name: [{ required: "true", message: "请输入名称", trigger: "blur" }],
  name1: [{ required: "true", message: "请输入名称", trigger: "blur" }],
};

const onSubmit = () => {
  const form = formRef.value;
  form?.validate((validate, errors) => {
    // console.log(validate, errors);
  });
};
</script>

<template>
  <div>
    <etu-form ref="formRef" :model="formData" :rules="rules">
      <etu-form-item label="名称1" prop="name" :rules="rules.name">
        <etu-input v-model="formData.name"></etu-input>
      </etu-form-item>
      <etu-form-item label="名称2" prop="name1" :rules="rules.name1">
        <etu-input v-model="formData.name1"></etu-input>
      </etu-form-item>
      <etu-form-item>
        <etu-button @click.prevent="onSubmit" type="primary">提交</etu-button>
      </etu-form-item>
    </etu-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

const formRef = ref();
const formData = reactive({ name: "", name1: "" });
const rules = {
  name: [{ required: "true", message: "请输入名称", trigger: "blur" }],
  name1: [{ required: "true", message: "请输入名称", trigger: "blur" }],
};

const onSubmit = () => {
  const form = formRef.value;
  form?.validate((validate, errors) => {
    // console.log(validate, errors);
  });
};
</script>

自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

<template>
  <div>
    <etu-form ref="formRef" :model="formData" :rules="rules">
      <etu-form-item label="名称1" prop="name" :rules="rules.name">
        <etu-input v-model="formData.name"></etu-input>
      </etu-form-item>
      <etu-form-item label="名称2" prop="name1" :rules="rules.name1">
        <etu-input v-model="formData.name1"></etu-input>
      </etu-form-item>
      <etu-form-item>
        <etu-button @click.prevent="onSubmit" type="primary">提交</etu-button>
      </etu-form-item>
    </etu-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

const formRef = ref();
const formData = reactive({ name: "", name1: "" });
const rules = {
  name: [
    { required: "true", message: "请输入名称", trigger: "blur" },
    {
      min: 3,
      max: 6,
      message: "长度最大6位最小3位",
      trigger: ["blur", "change"],
    },
  ],
  name1: [
    { required: "true", message: "请输入名称", trigger: "blur" },
    {
      min: 3,
      max: 6,
      message: "长度最大6位最小3位",
      trigger: ["blur", "change"],
    },
  ],
};

const onSubmit = () => {
  const form = formRef.value;
  form?.validate((validate, errors) => {
    // console.log(validate, errors);
  });
};
</script>

<template>
  <div>
    <etu-form ref="formRef" :model="formData" :rules="rules">
      <etu-form-item label="名称1" prop="name" :rules="rules.name">
        <etu-input v-model="formData.name"></etu-input>
      </etu-form-item>
      <etu-form-item label="名称2" prop="name1" :rules="rules.name1">
        <etu-input v-model="formData.name1"></etu-input>
      </etu-form-item>
      <etu-form-item>
        <etu-button @click.prevent="onSubmit" type="primary">提交</etu-button>
      </etu-form-item>
    </etu-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

const formRef = ref();
const formData = reactive({ name: "", name1: "" });
const rules = {
  name: [
    { required: "true", message: "请输入名称", trigger: "blur" },
    {
      min: 3,
      max: 6,
      message: "长度最大6位最小3位",
      trigger: ["blur", "change"],
    },
  ],
  name1: [
    { required: "true", message: "请输入名称", trigger: "blur" },
    {
      min: 3,
      max: 6,
      message: "长度最大6位最小3位",
      trigger: ["blur", "change"],
    },
  ],
};

const onSubmit = () => {
  const form = formRef.value;
  form?.validate((validate, errors) => {
    // console.log(validate, errors);
  });
};
</script>

FormItem API

名称说明类型默认值
propmodel的键名string / string[]——
label标签文本string——
label-width标签宽度string / number——
required校验规则booleanfalse
rules表单验证规则object——

FormItemRule

插槽名说明类型默认
trigger验证逻辑的触发方式enum——