ElementUI中＜el-form＞标签中 ref:model:rules 的作用

Posted 2023-04-02 品克缤

首先看一下代码

<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找到对应的规则），然后进行验证。

关于elementUI中el-form的rules

以下代码是借用链接描述

一般我们在使用elementUI来实现一个表单验证的时候，我们需要使用rules这个标签，表单验证规则，它后面所跟的就是你写的规则，这个是写在data中的。

rqueired:是否必填，如不设置，则会根据校验规则自动生成
trigger:不太清楚为啥要这么写，
validator:这里是指定自己写的规则。

在自己写的方法中，可以将公共方法给调用进来

这里的Error代表：表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息