uni-app的内置组件已经有了 <form> 组件，用于提交表单内容。

然而几乎每个表单都需要做表单验证，为了方便做表单验证，减少重复开发， uni-ui 又基于 <form> 组件封装了 <uni-forms> 组件，内置了表单验证功能。

<uni-forms> 提供了 rules 属性来描述校验规则、 <uni-forms-item> 子组件来包裹具体的表单项，以及给原生或三方组件提供了 onFieldChange() 来校验表单值。

每个要校验的表单项，不管input还是checkbox，都必须放在 <uni-forms-item> 组件中，且一个 <uni-forms-item> 组件只能放置一个表单项。

<uni-forms-item> 组件内部预留了显示error message的区域，默认是在表单项的底部。

另外， <uni-forms> 组件下面的各个表单项，可以通过 <uni-group> 包裹为不同的分组。同一 <uni-group> 下的不同表单项目将聚拢在一起，同其他group保持垂直间距。 <uni-group> 仅影响视觉效果。

# 介绍

# 基本用法

uni-forms 组件通常用来做表单校验和提交。每一个 uni-forms-item 是它的一个表单域组件，用来承载表单具体内容， uni-forms-item 中可以嵌套 uni-easyinput 、 uni-data-checkbox 和 uni-app 内置的表单组件

<template>
	<view class="">
		<uni-forms :modelValue="formData">
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="年龄" name="age">
				<input type="text" v-model="formData.age" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item required name="hobby" label="兴趣爱好">
				<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
			</uni-forms-item>
		</uni-forms>
		<button @click="submitForm">Submit</button>
	</view>
</template>

# 对齐方式

使用 label-position 属性可以设置所有表单域的位置，默认在左侧

<template>
	<view class="">
		<uni-forms :modelValue="formData" label-position="top">
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item required name="hobby" label="兴趣爱好">
				<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

# 表单校验

表单校验还可以直接通过 uniCloud web 控制台 快速根据 schema 自动生成表单维护界面，比如新建页面和编辑页面，自动处理校验规则，更多参考 DB Schema

# 如何使用

1. uni-forms 需要通过 rules 属性传入约定的校验规则，详细描述下文 校验规则说明 。

<!-- rules 内容详见下方完整示例 -->
<uni-forms ref="form" :rules="rules">
</uni-forms>

2. uni-forms 需要绑定 model 属性，值为表单的key\value 组成的对象。

<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms ref="form" :model="formData" :rules="rules">
</uni-forms>

3. uni-forms-item 需要设置 name 属性为当前字段名，字段为 String|Array 类型。

<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms :modelValue="formData" :rules="rules">
	<uni-forms-item label="姓名" name="name">
		<uni-easyinput type="




    
text" v-model="formData.name" placeholder="请输入姓名" />
	</uni-forms-item>
	<uni-forms-item required :name="['data','hobby']" label="兴趣爱好">
		<uni-data-checkbox multiple v-model="formData.data.hobby" :localdata="hobby"/>
	</uni-forms-item>
</uni-forms>

4. 只要使用的组件不管内置组件还是三方组件，只需绑定 v-model，无需其他操作，即可参与校验。
5. 如果使用原生 checkbox 或三方组件不支持 v-model 等，只需要给组件绑定 binddata 方法即可触发表单校验，无需绑定事件到 methods 中，见下方完整示例。
6. binddata('name',$event.detail.value,'form')" 方法接受三个值，
   • 第一个参数传入当前表单组件所在的 name，同当前父组件 uni-forms-item 绑定属性 name 的值
   • 第二个参数传入需要校验的值，内置组件可以通过 $event.detail.value 获取到组件的返回值，自定义组件传入需要校验的值即可
   • 第三个参数传入 uni-forms 组件绑定属性 ref 的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个 uni-forms 可忽略
7. 如果内置 binddata 方法无法满足需求，在当前页面的 methods 中复写此方法即可，复写此方法需要调用 uni-forms 的 setValue 来触发表单校验，见下方 setValue 方法说明

完整示例

<template>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" name="email">
				<input class="input" v-model="formData.email" type="text" placeholder="请输入邮箱" @input="binddata('email',$event.detail.value)" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit">Submit</button>
	</view>
</template>