Form 表单

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

典型表单

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

在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值

姓名:

Please enter the content first

年龄:

Please enter the content first

家庭住址:

Please enter the content first

出生日期:

Please enter the content first

学校:

Please enter the content first

Details

vue

<template>
  <AForm :model="formState">
    <AFormItem label="姓名:">
      <AInput placeholder="请输入姓名" v-model="formState.name" />
    </AFormItem>
    <AFormItem label="年龄:">
      <AInput type="password" show-password placeholder="请输入年龄" v-model="formState.age" />
    </AFormItem>
    <AFormItem label="家庭住址:">
      <AInput clearable placeholder="请输入家庭住址" v-model="formState.address" />
    </AFormItem>
    <AFormItem label="出生日期:">
      <ADatePicker v-model="formState.birthday" />
    </AFormItem>
    <AFormItem label="学校:">
      <ASelect :options="options.slice(0, 6)" placeholder="请选择学校" v-model="formState.school">
      </ASelect>
    </AFormItem>
    <AFormItem>
      <ASpace>
        <AButton>Reset</AButton>
        <AButton type="primary">Submit</AButton>
      </ASpace>
    </AFormItem>
  </AForm>
</template>

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

const formState = reactive({
  name: "坤坤",
  age: "",
  address: "",
  school: 2,
  birthday: "",
});

const options = ref([
  {
    value: 1,
    text: "Yjj",
  },
  {
    value: 2,
    text: "Big龙",
  },
  {
    value: 3,
    text: "嘿毛",
  },
  {
    value: 4,
    text: "嫖瓜",
  },
  {
    value: 5,
    text: "吊毛",
  },
  {
    value: 6,
    text: "吴彦祖",
  },
  {
    value: 7,
    text: "陈冠希",
  },
  {
    value: 8,
    text: "林俊杰",
  },
]);
</script>

表单校验

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。 Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。

姓名:

Please enter the content first

年龄:

Please enter the content first

家庭住址:

Please enter the content first

出生日期:

Please enter the content first

学校:

Please enter the content first

Details

vue

<template>
  <AForm :model="formState" :rules="rules" ref="formRef">
    <AFormItem label="姓名:" prop="name">
      <AInput placeholder="请输入姓名" v-model="formState.name" />
    </AFormItem>
    <AFormItem label="年龄:" prop="age">
      <AInput placeholder="请输入年龄" v-model="formState.age" />
    </AFormItem>
    <AFormItem label="家庭住址:" prop="address">
      <AInput clearable placeholder="请输入家庭住址" v-model="formState.address" />
    </AFormItem>
    <AFormItem label="出生日期:" prop="birthday">
      <ADatePicker v-model="formState.birthday" />
    </AFormItem>
    <AFormItem label="学校:" prop="school">
      <ASelect :options="options.slice(0, 6)" placeholder="请选择学校" v-model="formState.school">
      </ASelect>
    </AFormItem>
    <AFormItem>
      <ASpace>
        <AButton @click="onReset">Reset</AButton>
        <AButton @click="onSubmit" type="primary">Submit</AButton>
      </ASpace>
    </AFormItem>
  </AForm>
</template>

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

const formRef = ref();
const formState = reactive({
  name: "坤坤",
  age: "",
  address: "",
  school: 2,
  birthday: "",
});

const options = ref([
  {
    value: 1,
    text: "Yjj",
  },
  {
    value: 2,
    text: "Big龙",
  },
  {
    value: 3,
    text: "嘿毛",
  },
  {
    value: 4,
    text: "嫖瓜",
  },
  {
    value: 5,
    text: "吊毛",
  },
  {
    value: 6,
    text: "吴彦祖",
  },
  {
    value: 7,
    text: "陈冠希",
  },
  {
    value: 8,
    text: "林俊杰",
  },
]);

const onSubmit = () => {
  formRef.value
    .validate()
    .then((res) => {
      console.log(formState);
      AMessage.success({
        message: "提交成功",
      });
    })
    .catch((err) => {
      AMessage.error({
        message: err,
      });
      console.log(err);
    });
};
const onReset = () => {
  formRef.value.resetFields()
}
const rules = {
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  age: [
    { required: true, message: "Please input Activity age", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  address: [
    {
      required: true,
      message: "Please input Activity address",
      trigger: "blur",
    },
    { min: 4, max: 15, message: "Length should be 5 to 15", trigger: "change" },
  ],
  birthday: [{ required: true, message: "请选择出生日期", trigger: "change" }],
  school: [{ required: true, message: "请选择学校", trigger: "change" }],
};
</script>

Form 表单 ​

典型表单 ​

表单校验 ​

Form 表单

典型表单

表单校验