#  Form表单
---
### 基础用法

<div class="demo-block">
  <Form style="width:400px" :model="form"  :rules="rules" label-align="left" label-width="100">
    <FormItem label="用户名" prop="input">
      <y-input v-model="form.input"></y-input>
    </FormItem>
    <FormItem label="DatePicker">
      <y-date-picker v-model="form.datepicker"></y-date-picker>
    </FormItem>
    <FormItem label="Select">
      <y-select >
        <y-option v-for="(x,y) in form.select" :key="y" :value="x.value">{{x.label}}</y-option>
      </y-select>
    </FormItem>
    <FormItem label="Radio">
      <y-radio-group v-model="form.radio">
        <y-radio label="0">男</y-radio>
        <y-radio label="1">女</y-radio>
      </y-radio-group>
    </FormItem>
    <FormItem label="Checkbox">
      <y-checkbox-group v-model="form.checkbox">
        <y-checkbox label="0">男</y-checkbox>
        <y-checkbox label="1">女</y-checkbox>
      </y-checkbox-group>
    </FormItem>
    <FormItem label="Switch">
      <y-switch true-text="是" false-text="否"></y-switch>
    </FormItem>
    <FormItem label="Text">
      <y-input type="textarea" placeholder="请输入..."></y-input>
    </FormItem>
    <FormItem>
      <y-button>提交</y-button>
      <y-button type="gray" style="margin-left: 10px">取消</y-button>
    </FormItem>
  </Form>
</div>
<script>
  export default{
    data(){
      return{
        form: {
          switch: true,
          input: "",
          select: 0,
          datepicker: "",
          radio: "1",
          checkbox: ['0']
        },
        rules: {
          input: [{ required: true, trigger: 'blur' }]
        }, 
      }
    }
  }
</script>

::: demo

```html
<template>
    <Form style="width:400px" :model="form"  :rules="rules" label-align="left" label-width="100">
    <FormItem label="用户名" prop="input">
      <y-input v-model="form.input"></y-input>
    </FormItem>
    <FormItem label="DatePicker">
      <y-date-picker v-model="form.datepicker"></y-date-picker>
    </FormItem>
    <FormItem label="Select">
      <y-select >
        <y-option v-for="(x,y) in form.select" :key="y" :value="x.value">{{x.label}}</y-option>
      </y-select>
    </FormItem>
    <FormItem label="Radio">
      <y-radio-group v-model="form.radio">
        <y-radio label="0">男</y-radio>
        <y-radio label="1">女</y-radio>
      </y-radio-group>
    </FormItem>
    <FormItem label="Checkbox">
      <y-checkbox-group v-model="form.checkbox">
        <y-checkbox label="0">男</y-checkbox>
        <y-checkbox label="1">女</y-checkbox>
      </y-checkbox-group>
    </FormItem>
    <FormItem label="Switch">
      <y-switch true-text="是" false-text="否"></y-switch>
    </FormItem>
    <FormItem label="Text">
      <y-input type="textarea" placeholder="请输入..."></y-input>
    </FormItem>
    <FormItem>
      <y-button>提交</y-button>
      <y-button type="gray" style="margin-left: 10px">取消</y-button>
    </FormItem>
  </Form>
</template>

<script>
  export default{
    data(){
      return{
        form: {
          switch: true,
          input: "",
          select: 0,
          datepicker: "",
          radio: "1",
          checkbox: ['0']
        },
        rules: {
          input: [{ required: true, trigger: 'blur' }]
        }, 
      }
    }
  }
</script>
```
:::



### Form 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| model|表单数据对象|Object|--|--| 
| rules  | 表单验证规则 | boolean   |    true/false    | false   |
| label-width | 表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值| Number,String |    --   | --  |
| label-align  | 表单域标签的位置 | String  | left、right、top |  right  |
| validate  | 对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败，暂不支持异步验证 | Function  |  -- |  --  |
| validateField  | 对表单单个字段进行校验的方法| Function  |  -- |  --  |
| resetFields  | 对整个表单进行重置，将所有字段值重置为空并移除校验结果| Function  |  -- |  --  |

### FormItem 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| prop|对应表单域 model 里的字段，表单验证必须字段| String|--|--| 
| rules  | 表单验证规则 | Array   |   --   | --  |
| label | 标签文本| String |    --   | --  |

### rules 属性
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| required|是否必填字段| Boolean|--|false| 
| message  | 校验不通过提示语 | String   |   --   | --  |
| validator | 自定义校验方法，可参见示例| Function |    --   | --  |
| type | 数据类型校验，提供三种校验方式 mobile手机， mail邮箱， number数字类型判断| String |    --   | --  |
| min | 字段长度最小值校验| String |    --   | --  |
| max | 字段长度最大值校验| String |    --   | --  |