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

总结

作者:品克缤原文地址:https://blog.csdn.net/m0_46893049/article/details/126126414

%s 个评论

要回复文章请先登录注册