Form 表单

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

基础用法

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

form value:

{
  "email": "123",
  "password": "",
  "confirmPwd": "",
  "type": [],
  "count": "",
  "delivery": false
}

<script setup>
import { reactive, ref } from 'vue'

const formRef = ref()
const model = reactive({
  email: '123',
  password: '',
  confirmPwd: '',
  type: [],
  count: '',
  delivery: false,
})
const rules = {
  email: [{ type: 'email', required: true, trigger: 'blur' }],
  password: [{ type: 'string', required: true, trigger: 'blur', min: 3, max: 5 }],
  confirmPwd: [
    { type: 'string', required: true, trigger: 'blur' },
    {
      validator: (rule, value) => value === model.password,
      trigger: 'blur',
      message: '两个密码必须相同',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: '必须选择一个activity type',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: '必须选择 Activity count',
      trigger: 'change',
    },
  ],
}

const submit = async () => {
  try {
    await formRef.value.validate()
    console.log('passed!')
  } catch (e) {
    console.log('the error', e)
  }
}
const reset = () => {
  formRef.value.resetFields()
}
const options = Array.from({ length: 5 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<template>
  <div>
    <ZgForm :model="model" :rules="rules" ref="formRef">
      <ZgFormItem label="the email" prop="email">
        <ZgInput v-model="model.email" />
      </ZgFormItem>
      <ZgFormItem label="the password" prop="password">
        <ZgInput type="password" v-model="model.password" />
      </ZgFormItem>
      <ZgFormItem prop="confirmPwd" label="confirm password">
        <ZgInput v-model="model.confirmPwd" type="password" />
      </ZgFormItem>
      <ZgFormItem prop="type" label="Activity type">
        <ZgCheckboxGroup v-model="model.type">
          <ZgCheckbox v-for="i in 5" :key="i" :value="i">
            {{ i }}
          </ZgCheckbox>
        </ZgCheckboxGroup>
      </ZgFormItem>
      <ZgFormItem label="Activity count" prop="count">
        <ZgSelect v-model="model.count" placeholder="Activity count" :options="options" />
      </ZgFormItem>
      <ZgFormItem label="Instant delivery" prop="delivery">
        <ZgSwitch v-model="model.delivery" />
      </ZgFormItem>
      <div :style="{ textAlign: 'center' }">
        <ZgButton type="primary" @click.prevent="submit">Submit</ZgButton>
        <ZgButton @click.prevent="reset">Reset</ZgButton>
      </div>
    </ZgForm>
    <div>
      form value:
      <pre>{{ model }}</pre>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const formRef = ref()
const model = reactive({
  email: '123',
  password: '',
  confirmPwd: '',
  type: [],
  count: '',
  delivery: false,
})
const rules = {
  email: [{ type: 'email', required: true, trigger: 'blur' }],
  password: [{ type: 'string', required: true, trigger: 'blur', min: 3, max: 5 }],
  confirmPwd: [
    { type: 'string', required: true, trigger: 'blur' },
    {
      validator: (rule, value) => value === model.password,
      trigger: 'blur',
      message: '两个密码必须相同',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: '必须选择一个activity type',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: '必须选择 Activity count',
      trigger: 'change',
    },
  ],
}

const submit = async () => {
  try {
    await formRef.value.validate()
    console.log('passed!')
  } catch (e) {
    console.log('the error', e)
  }
}
const reset = () => {
  formRef.value.resetFields()
}
const options = Array.from({ length: 5 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<template>
  <div>
    <ZgForm :model="model" :rules="rules" ref="formRef">
      <ZgFormItem label="the email" prop="email">
        <ZgInput v-model="model.email" />
      </ZgFormItem>
      <ZgFormItem label="the password" prop="password">
        <ZgInput type="password" v-model="model.password" />
      </ZgFormItem>
      <ZgFormItem prop="confirmPwd" label="confirm password">
        <ZgInput v-model="model.confirmPwd" type="password" />
      </ZgFormItem>
      <ZgFormItem prop="type" label="Activity type">
        <ZgCheckboxGroup v-model="model.type">
          <ZgCheckbox v-for="i in 5" :key="i" :value="i">
            {{ i }}
          </ZgCheckbox>
        </ZgCheckboxGroup>
      </ZgFormItem>
      <ZgFormItem label="Activity count" prop="count">
        <ZgSelect v-model="model.count" placeholder="Activity count" :options="options" />
      </ZgFormItem>
      <ZgFormItem label="Instant delivery" prop="delivery">
        <ZgSwitch v-model="model.delivery" />
      </ZgFormItem>
      <div :style="{ textAlign: 'center' }">
        <ZgButton type="primary" @click.prevent="submit">Submit</ZgButton>
        <ZgButton @click.prevent="reset">Reset</ZgButton>
      </div>
    </ZgForm>
    <div>
      form value:
      <pre>{{ model }}</pre>
    </div>
  </div>
</template>

Form 表单 ​

基础用法 ​

Form 表单

基础用法