ElementUI中<el-form>标签中ref、:model、:rules的作用浅析

首先看一下代码

<el-form
      ref="loginForm"
      :model="loginInfo"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >

ref 属性涉及Dom 元素的获取(el-form表单对象)。

javaSrcipt 获取Dom 元素是通过：document.querySelector（".input"）获取dom元素节点 。

Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是:ref 绑定控件，$refs 获取控件。

Element官方文档中写到：

model是表单数据对象，rules是表单验证规则。

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

里面的逻辑大概是，在el-form-item上写一个prop，这个prop左手对应着数据源（即用model.prop找到对应的数据源），右手对应着验证规则（即用rules.prop找到对应的规则），然后进行验证。

补充：注意点

1. :model的数据属性和:rules的属性相对应
2. 一个el-form-item中有多个输入框，每个输入框都需要单独嵌套在el-form-item中，此操作可以单独校验每个输入框
3. 日期类型的数据，校验要指定type:'date'
4. 选择框的value为数值，校验需要指定type:'number'
5. 单选按钮和多选按钮为数值，校验需要指定type:'number'
6. 输入框想要转换成为数值类型，可以使用v-model.number，校验需要指定type:number'
7. 输入框想要校验邮箱格式，只需要指定type:'email'
8. 嵌套在el-input中的el-select不能实现联动校验，若想实现联动校验，需要@change自定义调用校验
9. rules的简单校验有三个属性：required,message,trigger,分别为：是否必填，校验失败提示信息，校验时机
10. 如果要自定义校验规则，需要属性validator:(rule,value,callback)=>{手动校验代码块},rule参数数据很丰富，为一个Object类型的数据，有field,type,validator,required等属性，value为:model属性的值，callback(str)为要返回的信息
11. 单选框，多选框，日期框，选择框的校验时机都应该指定为change,符合业务场景
12. 动态添加或删除form表单的组件，需要动态配置好label,prop,rule的数据，删除按钮需要注意代码let index = array.indexOf(item)和array.splice(index,1)
13. 重置按钮：this.$refs['refName'].resetFields();，清空了校验，表单数据也恢复初始值
14. 校验单个组件：this.$refs['refName'].validateField('propName');进行了单个校验
15. 校验全部：this.$refs['refName'].validate(valid=>{});表单整体校验，一般提交按钮需要触发全部校验

总结