Form 表单

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

基础用法

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

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

form value:

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

<script setup>
import { reactive, ref } from 'vue'
import PfForm from '@/components/lib/Form/src/Form.vue'
import PfFormItem from '@/components/lib/Form/src/FormItem.vue'
import PfInput from '@/components/lib/Input/src/Input.vue'
import PfButton from '@/components/lib/Button/src/Button.vue'
import PfSwitch from '@/components/lib/Switch/src/Switch.vue'
import PfSelect from '@/components/lib/Select/src/Select.vue'
const model = reactive({
  email: '',
  password: '',
  confirmPwd: '',
  agreement: false,
  gender: ''
})
const gender = [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' },
  { label: '保密', value: 'secret' }
]
const formRef = ref()
const submit = async () => {
  alert('submitted!')
}
const reset = () => {
  formRef.value.resetFields()
}
</script>
<template>
  <div>
    <pf-form :model="model" ref="formRef">
      <pf-formItem prop="email" label="the email">
        <pf-input v-model="model.email" />
      </pf-formItem>
      <pf-formItem prop="password" label="the password">
        <pf-input v-model="model.password" type="password" />
      </pf-formItem>
      <pf-formItem prop="agreement" label="agreement">
        <pf-switch v-model="model.agreement" />
      </pf-formItem>
      <pf-formItem prop="gender" label="gender">
        <pf-select v-model="model.gender" :options="gender" />
      </pf-formItem>
      <pf-formItem>
        <pf-button @click.prevent="submit" type="primary">Submit</pf-button>
        <pf-button @click.prevent="reset">Reset</pf-button>
      </pf-formItem>
    </pf-form>

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

表单校验

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

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

form value:

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

<script setup>
import { reactive, ref } from 'vue'
import PfForm from '@/components/lib/Form/src/Form.vue'
import PfFormItem from '@/components/lib/Form/src/FormItem.vue'
import PfInput from '@/components/lib/Input/src/Input.vue'
import PfButton from '@/components/lib/Button/src/Button.vue'
import PfSwitch from '@/components/lib/Switch/src/Switch.vue'
import PfSelect from '@/components/lib/Select/src/Select.vue'
const model = reactive({
  email: '',
  password: '',
  confirmPwd: '',
  agreement: false,
  gender: ''
})
const gender = [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' },
  { label: '保密', value: 'secret' }
]
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' }],
  agreement: [
    { type: 'enum', required: true, enum: [true], message: '请同意协议' }
  ],
  gender: [{ type: 'string', required: true, trigger: 'change' }]
}
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>
    <pf-form :model="model" :rules="rules" ref="formRef">
      <pf-formItem prop="email" label="the email">
        <pf-input v-model="model.email" />
      </pf-formItem>
      <pf-formItem prop="password" label="the password">
        <pf-input v-model="model.password" type="password" />
      </pf-formItem>
      <pf-formItem prop="agreement" label="agreement">
        <pf-switch v-model="model.agreement" />
      </pf-formItem>
      <pf-formItem prop="gender" label="gender">
        <pf-select v-model="model.gender" :options="gender" />
      </pf-formItem>
      <pf-formItem>
        <pf-button @click.prevent="submit" type="primary">Submit</pf-button>
        <pf-button @click.prevent="reset">Reset</pf-button>
      </pf-formItem>
    </pf-form>

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

自定义校验规则

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

form value:

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

<script setup>
import { reactive, ref } from 'vue'
import PfForm from '@/components/lib/Form/src/Form.vue'
import PfFormItem from '@/components/lib/Form/src/FormItem.vue'
import PfInput from '@/components/lib/Input/src/Input.vue'
import PfButton from '@/components/lib/Button/src/Button.vue'
import PfSwitch from '@/components/lib/Switch/src/Switch.vue'
import PfSelect from '@/components/lib/Select/src/Select.vue'
const model = reactive({
  email: '',
  password: '',
  confirmPwd: '',
  agreement: false,
  gender: ''
})
const gender = [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' },
  { label: '保密', value: 'secret' }
]
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,
      message: '两次输入密码不一致',
      trigger: 'blur'
    }
  ],
  agreement: [
    { type: 'enum', required: true, enum: [true], message: '请同意协议' }
  ],
  gender: [{ type: 'string', required: true, trigger: 'change' }]
}
const formRef = ref()
const submit = async () => {
  try {
    await formRef.value.validate()
    console.log('passed')
  } catch (error) {
    console.log(error)
  }
}
const reset = () => {
  formRef.value.resetFields()
}
</script>
<template>
  <div>
    <pf-form :model="model" :rules="rules" ref="formRef">
      <pf-formItem prop="email" label="the email">
        <pf-input v-model="model.email" />
      </pf-formItem>
      <pf-formItem prop="password" label="the password">
        <pf-input v-model="model.password" type="password" />
      </pf-formItem>
      <pf-formItem prop="confirmPwd" label="confirm password">
        <pf-input v-model="model.confirmPwd" type="password" />
      </pf-formItem>
      <pf-formItem prop="agreement" label="agreement">
        <pf-switch v-model="model.agreement" />
      </pf-formItem>
      <pf-formItem prop="gender" label="gender">
        <pf-select v-model="model.gender" :options="gender" />
      </pf-formItem>
      <pf-formItem>
        <pf-button @click.prevent="submit" type="primary">Submit</pf-button>
        <pf-button @click.prevent="reset">Reset</pf-button>
      </pf-formItem>
    </pf-form>

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

Form 属性

属性名	说明	类型	默认值
model	表单数据对象	object	—
rules	表单验证规则	object	—
label-suffix	表单域标签的后缀	string	''
labelWidth	标签的宽度	number	80
labelPosition	标签的位置 left \| right	string	'right'

Form 事件

名称	说明	类型
validate	任一表单项被校验后触发	Function

Form 公共方法

名称	说明	类型
validate	对整个表单的内容进行验证。接收一个回调函数，或返回 Promise。	Function
resetFields	重置该表单项，将其值重置为初始值，并移除校验结果	Function
clearValidate	清理某个字段的表单验证信息。	Function

FormItem 属性

属性名	说明	类型	Default
prop	model 的键名。它可以是一个属性的值(如 a.b.0 或 ['a', 'b', '0'])。在使用了 validate、resetFields 的方法时，该属性是必填的。	string / string[]	—
label	标签文本	string	—
labelWidth	标签的宽度	number	—

FormItem 事件

名称	说明	类型
validate	任一表单项被校验后触发	Function

FormItem 插槽

插槽名	说明	类型
default	表单的内容。	—
label	标签位置显示的内容	object

FormItem 公共方法

名称	说明	类型
validate	验证表单项	Function
resetField	对该表单项进行重置，将其值重置为初始值并移除校验结果	Function
clearValidate	移除该表单项的校验结果	Function

Form 表单 ​

基础用法 ​

form value: { "email": "", "password": "", "confirmPwd": "", "agreement": false, "gender": "" }

表单校验 ​

form value: { "email": "", "password": "", "confirmPwd": "", "agreement": false, "gender": "" }

自定义校验规则 ​

form value: { "email": "", "password": "", "confirmPwd": "", "agreement": false, "gender": "" }

Form 属性 ​

Form 事件 ​

Form 公共方法 ​

FormItem 属性 ​

FormItem 事件 ​

FormItem 插槽 ​

FormItem 公共方法 ​

Form 表单

基础用法

form value:
{ "email": "", "password": "", "confirmPwd": "", "agreement": false, "gender": "" }

表单校验

form value:
{ "email": "", "password": "", "confirmPwd": "", "agreement": false, "gender": "" }

自定义校验规则

form value:
{ "email": "", "password": "", "confirmPwd": "", "agreement": false, "gender": "" }

Form 属性

Form 事件

Form 公共方法

FormItem 属性

FormItem 事件

FormItem 插槽

FormItem 公共方法