表单组件

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

典型表单

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

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

邮箱

密码

意向

区域

---

form value:

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

<script setup>
import { reactive, ref } from 'vue'
import Form from '@com/Form/Form.vue'
import FormItem from '@com/Form/FormItem.vue'
import Input from '@com/Input/Input.vue'
import Button from '@com/Button/Button.vue'
import Switch from '@com/Switch/Switch.vue'
import Select from '@com/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="email" label="邮箱">
      <Input v-model="model.email" />
    </FormItem>
    <FormItem prop="password" label="密码">
      <Input v-model="model.password" type="password" />
    </FormItem>
    <FormItem prop="agreement" label="意向">
      <Switch v-model="model.agreement" />
    </FormItem>
    <FormItem prop="zone" label="区域">
      <Select v-model="model.zone" :options="options" />
    </FormItem>
    <FormItem style="margin-top: 16px">
      <Button @click.prevent="submit" type="primary">提交</Button>
      <Button @click.prevent="reset">重置</Button>
    </FormItem>
  </Form>
  <hr />
  <p>
    form value:
    <pre>{{model}}</pre>
  </p>
</div>
</template>

表单校验

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

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

邮箱

密码

意向

区域

---

form value:

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

<script setup>
import { reactive, ref } from 'vue'
import Form from '@com/Form/Form.vue'
import FormItem from '@com/Form/FormItem.vue'
import Input from '@com/Input/Input.vue'
import Button from '@com/Button/Button.vue'
import Switch from '@com/Switch/Switch.vue'
import Select from '@com/Select/Select.vue'
const model = reactive({
  email: '',
  password: '',
  agreement: false,
  zone: ''
})
const rules = {
  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="email" label="邮箱">
      <Input v-model="model.email" />
    </FormItem>
    <FormItem prop="password" label="密码">
      <Input v-model="model.password" type="password" />
    </FormItem>
    <FormItem prop="agreement" label="意向">
      <Switch v-model="model.agreement" />
    </FormItem>
    <FormItem prop="zone" label="区域">
      <Select v-model="model.zone" :options="options" />
    </FormItem>
    <FormItem style="margin-top: 16px">
      <Button @click.prevent="submit" type="primary">提交</Button>
      <Button @click.prevent="reset">重置</Button>
    </FormItem>
  </Form>
  <hr />
  <p>
    form value:
    <pre>{{model}}</pre>
  </p>
</div>
</template>

自定义校验规则

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