How does the FormItem component of element-ui perform binding value verification [source code interpretation]

1 Introduction

The element-ui framework has been used for two years, and it involves the verification of el-form components, which are only used according to the examples given on the official website. el-formBind the model, el-form-itembind the prop attribute, and el-form-itembind the v-model in the form. As long as the attributes bound by v-model are consistent with the prop attributes and various validation rules are added, the validation of a certain form can be realized.

Therefore, I subconsciously think that a certain value must be bound with v-model to achieve verification. When packaging a custom component, I will subconsciously use the component to realize the function of v-model binding value. But once when using a component encapsulated by a colleague, he did not use the v-model binding, but used :xxx.synca property value implemented to modify the parent-child component synchronously. But it can also realize the verification of the el-form form. This blows my mind. Although my colleague explained it for a long time, I still didn't understand it. So I decided to look at the source code by myself.

Although the source code is not completely understood, the principle of why the verification is not triggered by the attributes bound by v-model can be said to be basically understood.

2. Binding of blur and change event

First look at the composition of the el-form component:

the el-form component exists under node_modules/element-ui/packages/formthe path, index.js is the Vue registration file, form.vue, form-item.vue, are the component, the component, and the label of the form, label-wrap.vuerespectively . There are other methods that need to be used so I won't list them first. This article only talks about the basis for verifying form items, so you only need to look at the content of the component.el-formel-form-itemform-item

First look at the following piece of code:

1. When the component is mounted, two listening events ( change and blur ) will be added.
2. These two listening events will trigger el-form-itemthe validation function of the current component.

This $on()is used to trigger custom methods.
This $ontrigger is written in the various input forms of element-ui, that is, only the input form of element-ui can trigger the callback changeof and , and it cannot be triggered blurby directly binding a v-model with a native box. <input />Because the various input forms of element-ui (such as input, checkbox, radio, etc.) are written this.dispatch()to el-form-itemtrigger blurand change.

3. Verification when blur or change

The binding of blur and change event is roughly understood, and then we will see how to trigger the verification when blur or change.

In the first picture, you can see that a method will be executed when blur or change validate('blur'/'change'). Next, look at this validate method:

• Since the verification rule rules field can be added to el-formboth el-form-itemand, box 1 is used to filter the verification rules.
• descriptor is used to delete the attributes in the verification rules trigger(maybe because the third-party library async-validator does not need this field)
• The third big red box is the process of the third-party library verifying the object [async-validator](https://gitcode.net/mirrors/yiminghe/async-validator?utm_source=csdn_github_accelerator)according to the verification rule object . When the verification fails, the prompt warning information of el-form-item is displayed according to these two fields.descriptormodelvalidateStatevalidateMessage

However, the answer to the title of this article is mainly on line 234. this.fieldValueObviously, this fieldValue is the value bound to the current form item (el-form-item). There is a computed property in the computer fieldValue:

it uses a getPropByPathmethod in the utils of the element. It is really unclear what the specific function of this method is. However, what it finally outputs is an object containing objects, keys, and values. Pass in an object and an attribute name to get the corresponding value. Then do some kind of filtering operation. Here it is simply understood as taking a value from an object .

The method in this computer getPropByPath()can be understood as taking the value from the object bound to the current property according to the el-form-itemcurrent propfield . Seeing this, the principle of el-form trigger verification should be roughly understandable.el-form标签model

3. Summary

A simple summary is:

• el-form-itemWhat is verified is the value of propthe field bound to the field and the corresponding field in the object, as shown in the age field in the figure below: el-formwhen performing or verification, the verification is yes , even if the binding below you is yes . It also validates fields. Therefore, it needs to be consistent with the field you need to bind, which explains why my colleague can trigger the verification without binding the value.model

blurchangeform.ageel-inputv-modelform.nameform.agepropformv-model

This is actually a very simple thing that I have never understood, it is too good.