# Form 表单
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

## 表单
我们为`form`提供了以下三种排列方式：
- 水平排列：标签和表单控件水平排列；（默认）
- 垂直排列：标签和表单控件上下垂直排列；
- 行内排列：表单项水平行内排列。

## 表单域

表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

这里我们封装了表单域 `<ui-form-field></ui-form-field>` 。

## 水平登陆栏
水平登录栏，常用在顶部导航栏中。

@[demo](demo/horizontal-login.vue)

## 登录框
普通的登录框，可以容纳更多的元素。

@[demo](demo/normal-login.vue)


## 注册新用户
用户填写必须的信息以注册新用户。

@[demo](demo/register.vue)



## 动态校验规则
以上演示没有出现的表单控件对应的校验演示。

@[demo](demo/validate-other.vue)




## 表单布局
表单有三种布局。

@[demo](demo/layout.vue)


## Form props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| rules | 验证规则 | Object/Array | {} | [] |
| data | 表单数据 | Object | {} | - |
| beforeValidate | 验证前函数 | Function | noop | - |
| afterValidate | 验证后函数	 | Function | noop | - |
| readonly | 是否只读表单 | Boolean | false | - |
| disabled | 是否禁止表单 | Boolean | false | - |

## Form methods

| 参数 | 说明 | 参数 |
| --- | --- | --- |
| submit | 执行submit逻辑 | - |
| validate | 对整个表单进行校验的方法。若不传入回调函数，则会返回一个 promise	 | {names:Array, trigger:String, complete:Function}\|callback:Function |
| reset | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | - |


## Form events

| 事件 | 说明 | 参数 |
| --- | --- | --- |
| succeed | 验证成功之后事件 | - |
| invalid | 验证失败之后事件 | - |