Form--Form表单

**

Form表单

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

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

**

1.典型表单

**
包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。
Form--Form表单_第1张图片

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


  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    取消
  



Form--Form表单_第2张图片

**

2.行内表单

在这里插入图片描述
**
当垂直方向空间受限且表单较简单时,可以在一行内放置表单

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


  
    
  
  
    
      
      
    
  
  
    查询
  


**

3.对齐方式

**
根据具体目标和制约因素,选择最佳的标签对齐方式。
Form--Form表单_第3张图片

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


  左对齐
  右对齐
  顶部对齐

**

4.表单验证

在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。
**
Form--Form表单_第4张图片

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


  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  


**

5.自定义校验规则

**
展示了如何使用自定义验证规则来完成密码的二次验证。
Form--Form表单_第5张图片

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


  
    
  
  
    
  
  
    
  
  
    提交
    重置
  


在这里插入图片描述
**

6.动态增减表单项

Form--Form表单_第6张图片
**

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


  
    
  
  
    删除
  
  
    提交
    新增域名
    重置
  


**

7.数字类型验证

Form--Form表单_第7张图片

**

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


  
    
  
  
    提交
    重置
  


在这里插入图片描述
**

8.表单内组件尺寸控制

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

**
Form--Form表单_第8张图片

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


  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
      
      
      
    
  
  
    
      
      
    
  
  
    立即创建
    取消
  



Form--Form表单_第9张图片
Form--Form表单_第10张图片
Form--Form表单_第11张图片
Form--Form表单_第12张图片
Form--Form表单_第13张图片
Form--Form表单_第14张图片
Form--Form表单_第15张图片

你可能感兴趣的:(Form--Form表单)