Element UI表单检验技术分析-01

最近在使用Vue + Element UI做后台管理系统。在管理系统中会有很多表单功能，为了约束用户输入数据的规范性，需要在表单中增加校验功能。

 

在官方文档中给出了Form表单校验的例子。

在点击“立即创建”按钮后，会触发表单校验，效果如下：

接下来分析一下这个校验功能是如何实现的。

 

可以看到在组件中，定义了 “rules”数据，并通过数据绑定的方式，将此“rules”数据传给了 Form表单。

将 “rules”数据绑定给表单后，并没有结束，我们还需要为需要校验的 “el-form-item”设置 “prop”属性。

 

“prop”的设置以及规则很容易被忽视，从而导致校验不生效。

在API文档中，“prop”属性的介绍如下：

 

在此介绍中，包含了两点重要信息：

1. 表单校验的情况下，此属性必须设置
2. 内容为model中的字段名

 

第一个信息很好理解。

第二个信息的意思如下图所示：

只有字段名一样的情况下，用户操作输入和看到的校验才会一致。

 

在实际开发过程中，有同事就将这两个设置的不一样，导致校验逻辑出现错误。