Form--Form表单

**

Form表单

**
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

①典型表单
②行内表单
③对齐方式
④表单验证
⑤自定义校验规则
⑥动态增减表单项
⑦数字类型验证
⑧表单内组件尺寸控制

**

1.典型表单

**
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker


  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    取消
  

**

2.行内表单

**
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

设置 inline 属性可以让表单域变为行内的表单域


  
    
  
  
    
      
      
    
  
  
    查询
  

**

3.对齐方式

**
根据具体目标和制约因素，选择最佳的标签对齐方式。

通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部


  左对齐
  右对齐
  顶部对齐



  
    
  
  
    
  
  
    
  

**

4.表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
**

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator


  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  

**

5.自定义校验规则

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

本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。


  
    
  
  
    
  
  
    
  
  
    提交
    重置
  

**

6.动态增减表单项

**

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则


  
    
  
  
    删除
  
  
    提交
    新增域名
    重置
  

**

7.数字类型验证

**

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。


  
    
  
  
    提交
    重置
  

**

8.表单内组件尺寸控制

通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。

**

如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的size属性，直接为这个表单项或表单组件设置自己的size即可。


  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
      
      
      
    
  
  
    
      
      
    
  
  
    立即创建
    取消