Form 表单

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

典型表单

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

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

the email

the password

agreement

zone

form value:

{
  "email": "",
  "password": "",
  "confirmPwd": "",
  "agreement": false,
  "zone": ""
}

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import {reactive, ref} from 'vue'
import Form from '@/components/Form/Form.vue'
import FormItem from '@/components/Form/FormItem.vue'
import Input from '@/components/Input/Input.vue'
import Button from '@/components/Button/Button.vue'
import Switch from '@/components/Switch/Switch.vue'
import Select from '@/components/Select/Select.vue'

const model = reactive({
  email: '',
  password: '',
  confirmPwd: '',
  agreement: false,
  zone: ''
})

const options = [
  {label: 'zone 1', value: 'one'},
  {label: 'zone 2', value: 'two'},
  {label: 'zone 3', value: 'three'}
]
const formRef = ref()
const submit = async () => {
  alert('submitted!')
}
const reset = () => {
  formRef.value.resetFields()
}
</script>

<template>
  <div>
    <Form :model="model" ref="formRef">
      <!-- <FormItem prop="name" label="enter your name" #default="{ validate }">
        <input v-model="model.name" @blur="validate('blur')" @input="validate('input')"/>
      </FormItem> -->
      <FormItem prop="email" label="the email">
        <Input v-model="model.email"/>
      </FormItem>
      <FormItem prop="password" label="the password">
        <Input v-model="model.password" type="password"/>
      </FormItem>
      <FormItem prop="agreement" label="agreement">
        <Switch v-model="model.agreement"/>
      </FormItem>
      <FormItem prop="zone" label="zone">
        <Select v-model="model.zone" :options="options"/>
      </FormItem>
      <FormItem>
        <Button @click.prevent="submit" type="primary">Submit</Button>
        <Button @click.prevent="reset">Reset</Button>
      </FormItem>
    </Form>

    <p>
      form value:
      <pre>{{ model }}</pre>
    </p>
  </div>
</template>

<style>

</style>

表单校验

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

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

the email

the password

agreement

zone

form value:

{
  "email": "",
  "password": "",
  "agreement": false,
  "zone": ""
}

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { reactive, ref } from 'vue'
import Form from '@/components/Form/Form.vue'
import FormItem from '@/components/Form/FormItem.vue'
import Input from '@/components/Input/Input.vue'
import Button from '@/components/Button/Button.vue'
import Switch from '@/components/Switch/Switch.vue'
import Select from '@/components/Select/Select.vue'
const model = reactive({
  email: '',
  password: '',
  agreement: false,
  zone: ''
})
const rules = {
  // name: [{ type: 'string', required: true, trigger: 'blur' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },],
  email: [{ type: 'email', required: true, trigger: 'blur' }],
  password: [{ type: 'string', required: true, trigger: 'blur' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' } ],
  agreement: [{ type: 'enum', required: true, enum: [true], message: '请同意协议'} ],
  zone: [{ type: 'string', required: true, trigger: 'change' }],
}
const options = [
  { label: 'zone 1', value: 'one' },
  { label: 'zone 2', value: 'two' },
  { label: 'zone 3', value: 'three' }
]
const formRef = ref()
const submit = async () => {
  try {
    await formRef.value.validate()
    console.log('passed!')
  } catch(e) {
    console.log('the promise', e)
  }
}
const reset = () => {
  formRef.value.resetFields()
}
</script>

<template>
  <div>
    <Form :model="model" :rules="rules" ref="formRef">
      <!-- <FormItem prop="name" label="enter your name" #default="{ validate }">
        <input v-model="model.name" @blur="validate('blur')" @input="validate('input')"/>
      </FormItem> -->
      <FormItem prop="email" label="the email">
        <Input v-model="model.email" />
      </FormItem>
      <FormItem prop="password" label="the password">
        <Input v-model="model.password" type="password" />
      </FormItem>
      <FormItem prop="agreement" label="agreement">
        <Switch v-model="model.agreement" />
      </FormItem>
      <FormItem prop="zone" label="zone">
        <Select v-model="model.zone" :options="options" />
      </FormItem>
      <FormItem>
        <Button @click.prevent="submit" type="primary">Submit</Button>
        <Button @click.prevent="reset">Reset</Button>
      </FormItem>
    </Form>

    <p>
      form value:
      <pre>{{model}}</pre>
    </p>
  </div>
</template>

<style>

</style>

React 用法

import { useRef, useState } from 'react'
import { Form, FormItem, Input } from '@bobocn/element/react'
import type { FormInstance, FormRules } from '@bobocn/element/react'
import '@bobocn/element/style.css'

function App() {
  const formRef = useRef<FormInstance>(null)
  const [model] = useState({ username: '', password: '' })

  const rules: FormRules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
    ],
  }

  const handleSubmit = async () => {
    try {
      await formRef.current?.validate()
      console.log('验证通过', model)
    } catch (errors) {
      console.log('验证失败', errors)
    }
  }

  return (
    <Form ref={formRef} model={model} rules={rules}>
      <FormItem label="用户名" prop="username">
        <Input
          modelValue={model.username}
          onUpdate:modelValue={(v) => { model.username = v }}
          placeholder="请输入用户名"
        />
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input
          type="password"
          modelValue={model.password}
          onUpdate:modelValue={(v) => { model.password = v }}
          placeholder="请输入密码"
        />
      </FormItem>
      <button type="button" onClick={handleSubmit}>提交</button>
      <button type="button" onClick={() => formRef.current?.resetFields()}>重置</button>
    </Form>
  )
}

API

Form 属性 (Attributes)

属性名	说明	类型	默认值
model	表单数据对象	Record<string, any>	—
rules	表单验证规则	FormRules	—

Form 插槽 (Slots)

插槽名	说明
default	FormItem 组件

Form 方法 (Exposes)

方法名	说明	类型
validate	对整个表单进行校验	() => Promise<boolean>
resetFields	重置表单项并移除校验结果	() => void
clearValidate	清除校验结果	(props?: string[]) => void

---

FormItem 属性 (Attributes)

属性名	说明	类型	默认值
label	标签文本	string	—
prop	对应 model 中的字段名，用于验证	string	—

FormItem 插槽 (Slots)

插槽名	说明
default	表单输入组件
label	自定义标签内容

FormItem 方法 (Exposes)

方法名	说明	类型
validate	对该表单项进行校验	() => Promise<boolean>
resetField	重置该表单项并移除校验结果	() => void
clearValidate	清除该表单项的校验结果	() => void