element中form表单验证的逻辑

element的form表单检验中，重点在于理解三个属性：el-form上的model、rules属性，和el-form-item上的prop属性。

验证无非在做一件事：把 某个数据 拿过来，看看它符不符合 某个规则 。

因此我们只需做两件事1: “指定数据”（通过prop属性），2: “指定规则”（通过rule属性），剩下的交给element。

el-form上的属性：

model：指定表单数据所在的对象。（收集的值在哪里）
rules：指定的验证规则所在的对象。（验证规则在哪里）

el-form-item上的属性：

prop：指定要进行验证的数据

上面说到model指定的数据对象，而prop则指定要验证的数据，是这个model数据对象下面的哪一个属性。

说白了prop就是个key，element会通过model.prop去取值，作为要验证的数据。

当然这里prop是个变量，严格的写法是:model[prop]

因此prop属性接收的是一个string，作为在model对象里key取到目标数据。但是要注意必须要指定model属性，因为内部机制就是：在model下取值。

rule：指定规则的地址

指定了数据，还要指定规则，rule属性就是用来指定规则的。

不同于prop是作为一个key去某个对象下取值，rule是直接指向一个对象或者说是一个地址。

因此你可以直接写 :rule = “xxx” ; 这里xxx直接就是一个变量，直接指定地址。

有时候我们只在el-form-item上指定一个prop属性，这种比较特殊，是同时用prop指定规则与数据。

这时prop同时作为两个角色，一个是在model下取值用的key，同时也是在rules里取值用的key。这时候规则的制定也是用key来取了，但要注意：这种必须指定rules属性。

由于是用一个字段同时指定了这两项，这就要求rules里对应验证规则的名字要和model里对应的验证数据项的名字必须保持一致。

当el-form-item上指定了prop属性的值为xxx,意味着：把model里对应的xxx属性拿过来，用rules里面的xxx规则去验证。即:用rules[prop]来校验model[prop]。

----------------------------------------end-----------------------------------