ElementUI浅尝辄止33：Form 表单

Form 表单：日常业务中很常见，由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据，常见于表单请求、登录，数据校验等业务操作中

1.如何使用？

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

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


  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    取消
  

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在  标签上添加 @submit.native.prevent。

2.行内表单

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

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


  
    
  
  
    
      
      
    
  
  
    查询
  

3.对齐方式

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

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


  左对齐
  右对齐
  顶部对齐



  
    
  
  
    
  
  
    
  

4.表单验证

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

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


  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  

5.自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

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


  
    
  
  
    
  
  
    
  
  
    提交
    重置
  

6. 动态增减表单项

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


  
    
  
  
    删除
  
  
    提交
    新增域名
    重置
  

7.数字类型验证

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

  
    
  
  
    提交
    重置
  

嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零，不会继承 el-form 的 label-width。如果需要可以为其单独设置 label-width 属性。

8.表单内组件尺寸控制

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

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


  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
      
      
      
    
  
  
    
      
      
    
  
  
    立即创建
    取消
  

 Form表单组件的大致内容就是这些，若想深入浅出可以前往表单组件