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=>{});表单整体校验，一般提交按钮需要触发全部校验

总结

到此这篇关于ElementUI中&lt;el-form&gt;标签中ref、:model、:rules的作用浅析的文章就介绍到这了,更多相关el-form标签中ref、:model、:rules作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论